Question

我有一个代码想要用html代码替换innerHTML我该如何替换。

document.getElementsByClassName('forget_password_email')[0].innerHTML = "<div class='input-email form-group margin-bottom-30'>
<input type='email' id='lg_username' value='' class='input-email form-control' placeholder='Email *' />
</div>
<button  type='submit' class='btn btn-lg btn-theme btn-hv-dark btn-rounded btn-default btn-inline ' id='reset'>Reset</button>
";

Answer 1

你可以在jquery中使用它。它是jquery的.html()函数。

   $($(".forget_password_email")[0]).html("<div class='input-email form-group margin-bottom-30'><input type='email' id='lg_username' value='' class='input-email form-control' placeholder='Email *' /></div><button  type='submit' class='btn btn-lg btn-theme btn-hv-dark btn-rounded btn-default btn-inline ' id='reset'>Reset</button>");

Answer 2

您是否缺少课程名称 - ＆gt;＆＃34; forget_password_email＆＃34;是一个类名还是id？因为当您将目标html放入目标html时，您的代码将起作用：

<script>
        //Your javascript codes.
var text ="<div class='input-email form-group margin-bottom-30'>"+
"<input type='email' id='lg_username' value='' class='input-email form-control' placeholder='Email *' />"+
"</div>"+
"<button  type='submit' class='btn btn-lg btn-theme btn-hv-dark btn-rounded btn-default btn-inline ' id='reset'>Reset</button>"; 

document.getElementsByClassName('forget_password_email')[0].innerHTML = text;
</script>

Answer 3

使用ENV("PYTHON")是非标准的，并且出于多种原因这是一种可怕的做法。您应该使用适当的标准方法创建一个新元素，然后将其添加到树中。

Answer 4

您可以使用Template literal。将您的html内容放在后面的勾号（`）中。它将允许您的文本是多行的。

模板文字是允许嵌入表达式的字符串文字。您可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。

document.getElementsByClassName('forget_password_email')[0].innerHTML = `<div class='input-email form-group margin-bottom-30'>
<input type='email' id='lg_username' value='' class='input-email form-control' placeholder='Email *' />
</div>
<button  type='submit' class='btn btn-lg btn-theme btn-hv-dark btn-rounded btn-default btn-inline ' id='reset'>Reset</button>`;

<div class='forget_password_email'></div>

Answer 5

有一种更好的方法可以做到这一点。设置innerHTML会产生一些不好的副作用（Javascript: Can't handle events for multiple instances）我发现它使我的网页不稳定并阻止我进行我想要的那种动态构建。

您应该做的是识别您想要的标签。然后，您可以使用该对象更改任何属性或附加内部HTML节点。

 var div = document.createElement("myDiv");
 div.setAttribute('someAttribute', value);
 var childTag = document.createElement('p');

这样做不会在页面中引入不稳定性。因此，对于您的代码，它看起来就像这样。

var tag = document.getElementsByClassName('forget_password_email')[0];
var childDiv = document.createElement('div');
childDiv.setAttribute('class', 'input-email form-group margin-bottom-30');
var childInput = document.createElement('input');
childInput.setAttribute('type', 'email');
childInput.setAttribute('id', 'lg_username');
....
tag.appendChild(childDiv);
tag.appendChild(childInput);

如何用＆＃34; html内容替换div内容＆＃34;用javascript？

5 个答案: