在不影响兄弟姐妹的情况下将html（文本）附加到元素？

Question

我总是使用appendChild向其他元素添加内容，因为如果我使用：

innerHTML +=  'added stringgggggggggg';

然后这会混淆动态元素，例如<form>，带有填充值（它将字段值重置为空）。

在没有appenChild且没有使用JQuery的情况下，是否有更短的方法可以为元素添加smth？

Answer 1

您可以使用element.insertAdjacentHTML()来评估并将原始HTML字符串附加到元素。

position

通过更改<!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend --> 属性，您可以在元素之前，之后，在开头内部或最后在其中插入。

innerHTML

与insertAdjacentHTML()不同，var parentEl = document.getElementById('parent'); parentEl.insertAdjacentHTML('beforeend', '<p>this paragraph was inserted at the end of the form without affecting the form field values!<p>');不会导致浏览器无法重新评估您注入的整个DOM节点，因此表单字段值将为保持。

＆＃13;

＆＃13;

<form id="parent">
  <input type="text" value="insert something after form"><br>
  <input type="text" value="without affecting the values"><br>
  <input type="text" value="in the form fields"><br>
</form>

＆＃13;

dplyr

＆＃13;

＆＃13;

＆＃13;