用 javascript 替换嵌套的 html 元素

Question

我有一个巨大的 dom 元素，我应该替换其中的一些嵌套列表 html 元素。我还尝试删除旧的嵌套元素并添加新的嵌套元素，但这也没有成功。

const someNewNestedListElement = someNestedListElement
const replacedElement= elementToBeReplaced.replaceChild(someNewNestedListElement , elementToBeReplaced.querySelector(".someOldNestedListElement");

上面的伪代码运行出错。有人可以帮我吗？我对 javascript 和 dom 操作还很陌生，所以我可能需要一些技巧。

Answer 1

试试这个

const h2 = document.querySelector("h2"),
      button= document.querySelector("button"),
      newItem = document.createElement('p');

newItem.innerText = "replaced text";

button.onclick = function() {
try {
  h2.parentNode.replaceChild(newItem, h2);
  }
catch {
  console.log("already replaced");
  }
}

<div class="container">
  
  <h1>Header1</h1>
  <div >
    <h2>Header2</h2>
  </div>
  <p>some dummy text</p>
  
  <button>replace header2</button>
</div>

用 javascript 替换嵌套的 html 元素

replace nested html elements with javascript

javascript

dom

ecmascript-6