javascript修改元素本身的HTML代码的方法

天遇到个来咨询利用原生的JS代码来修改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 属性去掉

<input id="mochu" type="text" onclick="act(this.value)" />

换成

<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:设置或获取对象的文本

avaweb技术分享

做为一名合格的Java web开发程序员，我们经常要精通前端和后端的各种代码，后端的Java也是我们经常用到的主要语言之一，前端那我们肯定用的是Javascript。

因此关于Java和Javascript的异同也是经常有人拿来做比较的，其实当时Javascript起的这个名字就是为了傍Java这个当时非常出名的语言，而如今Javascript也确实顺了当初开发者想出名的心愿。

现在的Javascript也是火得不要不要的，也至于各种框架也就随之而来，比如jQuery等等。。。

在Java中我们如果替换所有指定的字符串首先想到的是String#replaceAll这个方法，那如果我们在Javascript中要怎么做到的呢？

那还不赶快关注热爱科技数码的我，让我们一起学习与进步。

Javaweb技术分享

则：

<(.[^>]*)> 删除所有的 <>

<!--.* 删除所有的注释内容

-->

全部代码：

在线咨询

上一篇：网页源代码查看竟然有这么多方法！你都知道吗？
下一篇：你真的学会HTML标签了吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。