Отображение содержимого интервала с использованием JavaScript

#javascript #innerhtml #html

#javascript #innerhtml #HTML

Вопрос:

У меня есть этот код. Я делал это годами, но я в тупике с результатом этого примера. Цель состоит в том, чтобы сделать текстовое поле видимым и поместить в него содержимое выбранного тега SPAN.

 document.onclick = CaptureClickedElement;

function CaptureClickedElement(e)
{
var EventElement;
if(e==null)
    EventElement = event.srcElement;// IE
else
    EventElement = e.target;// Firefox

if( EventElement.tagName == "SPAN")
    {
    document.getElementById("divTXT").style.display="";
    document.getElementById("txt").value = document.getElementById("Span1").innerHTML;
    alert(document.getElementById("Span1").innerHTML)
    }
}

Как ни странно, он показывает содержимое, но также показывает теги open / close SPAN в конце. Если я предупреждаю о результатах, отображается то же самое.

Пожалуйста, найдите прикрепленный снимок экрана с этим здесь.

введите описание изображения здесь

У кого-нибудь есть представление о том, почему это происходит?

Спасибо!

Вот HTML (скопированный из комментариев mplungjan)

 <style type="text/css"> 
 #divOuter { 
   width: 100px; 
   height: 70px; 
   border: 1px solid blue; 
   float: left; 
 } 
 </style>

<body> 
  <div> 
    <form name="frm" method="post" action=""> 
      <div id="divTXT" style="display:none"> 
        <input type="text" id="txt" name="txt" value="" size="30" /> 
      </div> 
    </form> 
  </div> 
  <div id="divOuter"> 
    <span id="Span1">hi, this is a test.<span> 
  </div> 
</body>

1. <тип стиля=»текст /css»> #divOuter { ширина: 100 пикселей; высота: 70 пикселей; граница: 1 пиксель сплошного синего цвета; плавающий элемент: слева; } </style>

2. <тело> <div> <имя формы= «frm» метод =»post» действие =»»»> <идентификатор div=»divTXT» стиль= «отображение: отсутствует»> <тип ввода = «текст» идентификатор =»txt» имя =»txt» значение = «» размер =»30″ /> </div> </form> </div> <идентификатор div=»divOuter»> <идентификатор span=»Span1″> привет, это тест.<span> </div> </body>

Ответ №1:

Проблема со структурой:

 <span id="Span1">hi, this is a test.<span>

Обратите внимание на отсутствие надлежащего закрытия диапазона.

1. Хорошо замечено. Я даже не смог определить это, пока вставлял HTML в:O

2. @itsols не глупо — я видел такую странность много раз. Когда вы получаете innerHTML элемента и он возвращает вам фрагмент тега, вы должны автоматически заподозрить проблему со структурой.

Ответ №2:

Необходимо использовать .innerText (для IE) и .text для других.