js程式碼中內嵌html程式碼方法研究
應用背景：
需要在原有html程式碼中追加一段程式碼，如圖所示：
點選增加按鈕需要在下方新增一個combobox程式碼。
問題：
首先應用了js原生方法innerHTML+=方法，程式碼如下：
var html = "<div class='form-group'>" +
"<div class='col-md-10 col-sm-10'>" +
"<input name='timeDecision' class='form-control timeDeciCombobox" + comboboxNum + "' />" +
"</div>" +
"<div class='btn-group'>" +
"<button type='button' class='btn btn-link add-input glyphicon glyphicon-plus'></button>" +
"<button type='button' class='btn btn-link delete-input glyphicon glyphicon-minus'></button>" +
"</div>" +
"</div>";
var target = document.getElementById("timeDeci_form");
target.innerHTML += html;
但可出現想要的效果，但原combobox中資料不存在（下拉框打不開），如下圖：
出現該問題的原因：
使用target.innerHTML += html與var newHtml = target.innerHTML + html效果是一樣的，也就是此處銷燬了之前的DOM，而重新構造了與原有DOM具有相同id、class的新的DOM，後發現並不是銷燬了之前的DOM而是保留之前DOM空殼去掉其之前繫結的事件資料等，而js是在頁面初始化或新增元素時就已經進行事件等的繫結，所以之前繫結在原有DOM上的事件資料等不復存在。
解決方法：
使用JQuery的append方法，即
$("#timeDeci_form").append(html);即可，此方法只會在該id塊的末尾增加新的html語句，不會覆蓋之前存在DOM及其繫結資料事件。
小例子：
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
</head>
<body>
<div id="btn-div">
<button id="btn">button</button>
</div>
<script>
var btnId = 1;
$('#btn').click(function() {
alert('click');
var buttonDiv = $('#btn-div')[0];
buttonDiv.innerHTML += 'a';
})
</script>
</body></html>
新增後的的id="btn"的button不再有click事件，就能說明上面這個問題！如果你僅僅只是在指定的空div中嵌入程式碼，大可使用innerHTML即可，因為不存在覆蓋程式碼的問題。
after與append方法：
after可指定某位置後新增html程式碼，而appdend則指定某位置內部的最後新增html程式碼。
這也只是本人目前的實驗理解，如有不妥請指正！！
相關推薦
js程式碼中內嵌html程式碼方法研究
應用背景： 需要在原有html程式碼中追加一段程式碼，如圖所示： 點選增加按鈕需要在下方新增一個combobox程式碼。 問題： 首先應用了js原生方法innerHT
CSDN-markdown 中內嵌 html 語言
markdown 內嵌 html 1 設定 字型 <font size="5" color = "red">字型</font> 顯示效果：字型 2 設定下劃線 <u>新增下劃線</u> 顯示效果;
java去除html程式碼中含有的html、js、css標籤，獲取文字內容
現在在做政府網站，網站裡有很多公開資訊和政務諮詢的新聞，現在需要做新聞的RSS訂閱功能，其中有一項是需要處理文章頁的內容。我們後臺新增編輯文章使用的是編輯器，文章內容會帶有很多html標籤
JSP中在JS函式中巢狀Java程式碼的執行問題
function exitSystem() { var ok = confirm("您確定要退出該系統嗎？"); if(ok){ <%sess
jsp頁面中js程式碼中串插java程式碼
一 說明 儘管現在的趨勢是前後端徹底分離的開發模式，但是熟悉一下以前的一些內容也未嘗不可。 二 具體實現 事實上這個是非常容易實現的，因為在.jsp頁面裡面寫java程式碼本身就很簡單，下面就是所有例子。 1. User類 package cn.smileyan
在Python程式碼中呼叫windows command的方法
為了把sikuli的程式碼移動到pyunit的框架上，需要在程式碼裡執行windows的command。 使用的方法很簡單。Python的 os模組可以呼叫command line的指令。使用的時候需要import os。示例程式碼如下： import os cmd = '
js輸入當前頁面的HTML程式碼
在頁面底部加上下面程式碼即可： <script type="text/javascript"> var connector = (function(){ var connector = null; if(window.XMLHttpRequest){
VB.net窗體中呼叫專案內嵌HTML進行…
之前用VB.net做專案的時候一直想做一個漂亮點的圖表展示效果,嘗試了幾個.net原生的外掛後都宣告失敗,倒不是因為不能用,要麼是收費的(或者有版權水印)要麼就是太複雜了,上手很麻煩,回想起來之前做web開發的時候用過JS外掛highCharts感覺挺不錯的,今天又聽朋友推薦了個百度出的免費的eCha
解決android中viewpager和內嵌html滑動事件衝突
這幾天專案迭代，有個大的板塊是整體套用H5來做。由於H5裡還有好多小模組，需要一個滑動切換的效果，而android端只是提供一個空的fragment，佔據著viewpager的一個板塊。最開始的效果滑動起來分外尷尬。。 解決思路是這
EF6.0 生成的程式碼中沒有註釋的解決方法
目錄 初試Entity Framework6.0 之前一直在使用vs2010或者是vs2008，也一直使用的EF4.0一下的版本……在之前，也習慣了Model First的EF設計方式，因為感覺，在設計介面中可以更好的幫助構思；同時，在設計介面
在CSDN—Markdown中使用內嵌HTML，增加Markdown的功能。
總結： 一、設定字號、字型、顏色 <font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is som
如何讓C#程式碼中呼叫的物件的方法有提示說明
需要引用的dll檔案的，類中需要有提示資訊，如下： 在vs中 專案--屬性--生成--輸出--xml文件生成，如下圖所示： 最後，確定你在引用的程式集dll檔案和xml檔案的路徑是一致的，就
在 Emit 程式碼中如何await一個非同步方法
#0. 前言 首先立馬解釋一波為啥會有這樣一篇偽標題的Demo隨筆呢? 不是本人有知識誤區，或者要誤人子弟 因為大家都知道emit寫出來的都是同步方法，不可能await，至少現在這麼多年來沒有提供對應的功能 這是之前某天在微信群看見討論怎麼emit一個非同步方法幷包裝非同步結構，簡單幾句文字也未能清晰的表達
js oop中的三種繼承方法
custom 屬性方法 三種 調用方法 定義 this指向 兩個類 fun color JS OOP 中的三種繼承方法： 很多讀者關於js opp的繼承比較模糊，本文總結了oop中的三種繼承方法，以助於讀者進行區分。 <繼承使用一個子類繼承另一個父類，子類可以自
arttemplate模板引擎有假數據返回數據多層內嵌的渲染方法
錯誤 一個 scala pan 制作 nes 國家 引擎 求和 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="
GCC在C語言中內嵌匯編 asm __volatile__ 【轉】
學習 put 變量類型 10個 details 恢復 緩存cache 什麽 edi 轉自：http://blog.csdn.net/pbymw8iwm/article/details/8227839 在內嵌匯編中，可以將C語言表達式指定為匯編指令的操作數，而且不用去管如何
WinForm中內嵌WebBroswer
圖片 內存泄漏 navigate target src tar .com google tps 本文系原創。 前兩天在工作中需要在Winform的窗體中內嵌的一個瀏覽器，我們都知道winform其實是自帶了WebBroswer控件的，但是這個控件是IE的瀏覽器，存在
ifeve.com 南方《JVM 效能調優實戰之：使用阿里開源工具 TProfiler 在海量業務程式碼中精確定位效能程式碼》
https://blog.csdn.net/defonds/article/details/52598018 多次拉取 JStack，發現很多執行緒處於這個狀態： at jrockit/vm/Allocator.getNewTla(JJ)V(Native Method)
iView頁面Modal中內嵌Tabs，重新顯示Modal時預設選中Tabs的第一項
文件中說啟用面板的name用value，頁面第一次載入的時候可以，放在modal裡就不好使了，每次開啟的時候總顯示上一次離開時的介面。 真正能用的是 this.$refs.tabs.activeKey = 'name1' ，此方法也可以動態設定Tabs頁面。 html： <
JVM 效能調優實戰之 使用阿里開源工具 TProfiler 在海量業務程式碼中精確定位效能程式碼
本文是《JVM 效能調優實戰之：一次系統性能瓶頸的尋找過程》 的後續篇，該篇介紹瞭如何使用 JDK 自身提供的工具進行 JVM 調優將 TPS 由 2.5 提升到 20 (提升了 7 倍)，並準確定位系統瓶頸：我們應用裡靜態物件不是太多、有大量的業務執行緒在頻繁建立一些生命週期