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小時內與您取得聯系。