html替换元素javascript修正元素自己的HTML代码的办法

目标需求

HTML原始代码

<form action=\"大众\"大众 method=\"大众post\公众 class=\"大众form\"大众> <input id=\公众mm\"大众 type=\"大众text\公众 > <input id=\公众mochu\公众 type=\"大众text\"大众 onclick=\"大众act(this.value)\公众 /> <input id=\"大众mc\"大众 type=\公众text\公众 ></form>目标哀求：

利用JS代码将以上HTML代中的 id 为 mochu 的 input 中的 cnclick 属性去掉

换成

html替换元素javascript修正元素自己的HTML代码的办法 HTML

<input id=\公众mochu\"大众 type=\"大众text\公众 />办理方案

利用 JS中dom工具的 outerHTML 属性，可以轻松的办理这个问题

outerHTML：设置或获取工具及其内容的 HTML 形式

例：JS获取元表本身的HTML代码

代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

var html = document.getElementById('mochu').outerHTML;

console.log(html);

</script>

</body>

</html>

打印结果：

例：js修正指定元素的本身的HTML代码

通上面的例子，可以知道 outerHTML 属性可以获取到元素本身的HTML代码，既然可以获取也能设置或修正元素本身的代码

代码：

<!DOCTYPE html><html><head></head><body><form action=\"大众\"大众 method=\公众post\"大众 class=\"大众form\公众> <input id=\公众mm\"大众 type=\公众text\"大众 value=\公众飞鸟慕鱼博客\公众 > <input id=\"大众mochu\"大众 type=\公众text\"大众 onclick=\公众act(this.value)\公众/> <input id=\公众mc\公众 type=\"大众text\"大众 ></form><script> var html = document.getElementById('mochu').outerHTML = '<input id=\公众mochu\"大众 type=\"大众text\"大众 value=\"大众http://www.feiniaomy.com\"大众 />';</script></body></html>

运行结果如图所示

补充解释

以下是与 outerHTML 功能相似的属性，下一篇文章会详细解释一下他们的浸染与差异

innerHTML:设置或获取工具起始标签和结束标签之间的内容。

innerText:设置或获取位于工具起始和结束标签内的文本

outerHTML:设置或获取工具及其内容的 HTML 形式

outerText:设置或获取工具的文本