如何使用 javascript 通过"html content"替换 div 内容？

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

您是否缺少类名 ->"forget_password_email" 这是类名还是 id？因为当您像这样放入目标 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

使用 .innerHTML 是不标准的，并且由于许多原因而是一种糟糕的做法。您应该使用正确的标准方法创建一个新元素，并将其添加到树中。

Answer 4

您可以使用

Template literal .将您的 html 内容放在后面的 tick（'） 中。它将允许你的文本是多行的。

模板文本是允许嵌入表达式的字符串文本。您可以将多行字符串和字符串插值功能与它们一起使用。它们在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：无法处理多个实例的事件）我发现它使我的网页不稳定，并阻止我进行我想要的那种动态构建。

您应该做的是确定所需的标签。然后，您可以使用该对象更改任何属性或追加内部 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);