国产视频app昨天遇到個來咨詢利用原生的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"  />

解決方案

国产视频app利用 JS中dom對象的 outerHTML 屬性,可以輕松的解決這個問題 

outerHTML:設置或獲取對象及其內容的 HTML 形式

例:JS獲取元表本身的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)" value="http://xswdd.cn" />
    <input id="mc" type="text" >
</form>
<script>
    var html = document.getElementById('mochu').outerHTML;
    console.log(html);
</script>
</body>
</html>

打印結果:

 javascript修改元素本身的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://xswdd.cn" />';
</script>
</body>
</html>

運行結果如圖所示

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

国产视频app比對一下JS生成后的HTML代碼是不是沒有下面的屬性了

onclick="act(this.value)"

注意:

1、利用JS動態修改后的HTML代碼,在瀏覽器中查看源碼是看不出效果的

2、JS修改后HTML代碼在瀏覽器的控制臺中查看,瀏覽器F12

補充:

国产视频app以下是與 outerHTML 功能相似的屬性,下一篇文章會詳細說明一下他們的作用與區別

国产视频appinnerHTML:設置或獲取對象起始標簽和結束標簽之間的內容。

innerText:設置或獲取位于對象起始和結束標簽內的文本

国产视频appouterHTML:設置或獲取對象及其內容的 HTML 形式

outerText:設置或獲取對象的文本