.innerHTML против createElement () |setAttribute () против Direct * - PullRequest
Новая
       6

.innerHTML против createElement () |setAttribute () против Direct *

5 голосов
/ 22 июля 2011

Мне сказали, что это не "правильно", я не беспокоился об этом, пока не начал получать ошибку во время выполнения в IE9.Вот код, который мне нужно преобразовать для использования свойств объекта.Почему innerHTML не считается лучшей практикой? 

  var c=document.createElement('div');
  c.innerHTML= '<a name="a1" class="b" href="' + d[2].value + '">' + d[1].value + '</a>';

Ответы [ 3 ]

5 голосов
/ 22 июля 2011

Странно, что вы помещаете элемент A внутрь элемента A, но приведенное ниже должно работать. 

var c=document.createElement('a');
c.name = "a1";
c.className = "b";
c.href = d[2].value;
c.appendChild(document.createTextNode(d[1].value));

Предполагается, что d[1].value, как известно, не является правильно сформированным HTML из надежного источника, поэтому он, вероятно, будет более устойчивым к XSS, чем код innerHTML.

5 голосов
/ 22 июля 2011

innerHTML отлично, вы просто не используете его правильно.

innerHTML предназначается для содержимого тега. что означает между <a> и </a>

вам нужно установить d[2].value с помощью setAttribute и только d[1].value с innerHTML

это должно быть хорошо (не проверено) 

  var c=document.createElement('a');
  c.setAttribute("href",d[2].value);
  c.setAttribute("name","a1");
  c.setAttribute("class","b");
  c.innerHTML = d[1].value;

проверьте эти ссылки и примеры для setAttribute (метод) и innerHTML (свойство)

2 голосов
/ 22 июля 2011

Похоже, вы создаете якорь - с помощью document.createElement ('a') - и затем создаете в нем еще один якорь.Итак, в основном ваш HTML будет выглядеть так: 

<a>
    <a href="www.google.com">Click Here</a>
</a>

Это не правильно.Это причина, почему использование innerHTML для якорей не очень хорошо.Я думаю, что вы должны сделать это следующим образом: 

c.setAttribute('class', 'signature'); 
c.setAttribute('href', 'xyz');

и т. Д.

Вы также можете установить href и другие атрибуты непосредственно на якорь, используя javascript.См. http://www.w3schools.com/jsref/dom_obj_anchor.asp (Свойства объекта привязки).

...