js 實現 HTML 的拼接

2021-09-22 16:38:10 字數 887 閱讀 1234

在實際專案中 經常會用到利用 js 實現動態的新增前端**,如動態新增和**。

js 動態新增 html **主要有兩種方法:

2、拼接標籤字串,並用 innerhtml 來新增。

具體例項:

//通過 createelement()方法來新增乙個 p 元素 

var p = document.createelement("p");

//通過 createtextnode()方法來新增乙個文字節點

//將文字節點新增到 p 元素中

//獲取所要新增的位置

var demo = document.getelementbyid("demo");

//在所需位置新增 p 元素

2、拼接標籤字串,並用 innerhtml 來新增。(自我認為這個方法比較簡便)

//通過 拼接 字串 來新增 html 內容。 

var name = '測試樣例'; age = 18 ;

var html = '' ;

//動態新增乙個段落

html += "我是另外一種方式新增的新段落!!!

";//動態新增乙個**

html += '';

html += ''+ name +' ';

html += ''+ age +' ';

html += '';

demo.innerhtml += html;

在拼接字串時,中間的 name 、age 值時填充進來的,可以根據獲取的值進行替換。 拼接字串時注意格式正確。

js 字串拼接 html 累加 html 疊加

正常來說已經使用es6 的 模板了如 頁面層 layer.open p style margin 15px word break break all p li li class mui table view cell i class icon iconfont i 感冒 p style margin...

js動態拼接html中函式傳遞多個引數問題

前端在開發的時候,難免會用到動態拼接表單,而動態拼接的表單中一旦涉及到函式的傳遞引數,感覺就頭疼,這裡記錄一下動態傳遞多個引數的兩種方式。將乙個物件序列化為為乙個引數data,然後傳遞值 注意的坑 這裡的 nclick fun,這裡的fun函式名稱不要加雙引號,照著這個格式寫即可。先將要傳的物件序列...

在js裡拼接html時的乙個小小細節

專案中需要在js裡拼接乙個table,部分 如下 var result result 員工號 姓名 部門 職位 技能等級 聯絡 籍貫 現住址 在職狀態 入職時間 離職時間 身份證號 for var i 0 i result staffviewlist i staff.staff number res...