Question

有以下HTML代码：

<body>
  <menu>
  </menu>
  ... other html
</body>

我需要将<menu>标记替换为变量中的HTML内容。我知道如何使用字符串变量和内容（变量'template'）;

来更改innerHTML

menu.innerHTML = template;

变量'模板'包含'<ul class="menu"></ul>'。结果我想要以下HTML：

<body>
  <ul class="menu">
  </ul>
  ... other html
</body>

Answer 1

你提到innerHTML;有一个相应的outerHTML property，设置后会用你的更新替换元素和所有孩子：

var menu = document.getElementsByTagName('menu')[0];
menu.outerHTML = template;

Answer 2

尝试：

var body = document.getElementsByTagName('body')[0];
body.innerHTML = body.innerHTML.replace(/<menu>[\s\S]*?<\/menu>/, template);

Answer 3

试试这个

var str = '<ul class="menu"></ul>';
var menu = document.getElementsByName('menu');
var parentMenu = menu.parentNode;
parentMenu.removeChild(menu);
parentMenu.innerHTML = str + parentMenu.innerHTML;

Answer 4

试试这个

var elem = document.getElementsByTagName('body')[0]; // Select any element you want.
var target = elem.innerHTML;
elem.innerHTML = target.replace(/(<menu)/igm, '<ul class="menu"').replace(/<\/menu>/igm, '</ul>');

使用本机JS将HTML元素替换为字符串内容

4 个答案: