動態生成HTML元素並為元素追加屬性

2021-08-19 08:06:05 字數 2575 閱讀 7527

新增a元素:

lang="en">

charset="utf-8">

title>

head>

id="main">

id="login">

span>

div>

body>

var link = document.createelement('a');

link.setattribute('href','#');

link.setattribute('id','login');

link.style.color = 'green';

link.innerhtml = '登入';

var main = document.getelementbyid('main');

script>

html>

第二種:使用innerhtml直接將元素新增到指定節點:

lang="en">

charset="utf-8">

title>

head>

id="main">

id="login">

span>

div>

body>

var link = document.createelement('a');

//使用innerhtml將元素直接新增到指定節點

main.innerhtml = "登入";

script>

html>

第三種:jquery建立節點

jquery中建立dom物件,使用jquery的工廠函式$()完成,格式如下:

$(html);

$(html)會根據傳入的html標記字串,建立乙個dom物件,並將這個dom物件包裝成乙個jquery物件後返回.

jquery中插入節點方法有:

3.prepend()方法:向每個匹配的元素內部前置內容

4.prependto():將所有匹配的內容前置到指定的元素中,與prpend()方法顛倒

5.after()向每個匹配的元素之後插入內容

6.insertafter()將所有匹配的元素插入到指定元素的後面,與after()方法顛倒

7.before()在每個匹配的元素之前插入內容

8.insertbefore()將每個匹配的元素插入到指定內容之前,與before()方法顛倒

lang="en">

charset="utf-8">

title>

src="jquery-1.11.1.min.js">

script>

$(function

())

script>

head>

id="main">

div>

body>

html>

主要有是兩種方案:

1.使用dom

//使用createelement建立元素

var dialog = document.createelement('div');

var img = document.createelement('img');

var btn = document.createelement('input');

var content = document.createelement('span');

// 新增class

dialog.classname = 'dialog';

// 屬性

img.src = 'close.gif';

// 樣式

btn.style.paddingright = '10px';

// 文字

span.innerhtml = '您真的要gg嗎?';

// 在容器元素中放入其他元素

var popcontent =[

'','',

'+name+'">'+formedname+'',

''].join(' ');

class="se-preview-section-delimiter">div>

或者使用這種寫法

var popcontent =  'monitory-point-li" indexcode="

00000000001310013631

">'+

'checkbox-unchecked">'+

'monitory-text" title="

'+name+'

">'+formedname+''+

'';

Html元素動態新增方法

今天做東東的時候要用 js建立 html 元素然後動態給該元素新增方法,走了不少彎路。最後把解決方法發布,讓大家以後少走彎路。js檔案 function checknull id varchecknewnull function id 給html 元素新增方法 建立乙個 textarea std2a...

jq獲取動態生成元素的html和val

動態生成的表單,繫結事件要使用事件委託。不是input框建議使用alt儲存應該給value的值,使用attr alt 獲取 var str for let i 0 i setmeallist str setmeallist on click checkboxs function 事件委託 id se...

利用jQuery動態構造HTML元素

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title 匯入jquery.js js jquery.js script head 自定義模板 template headdiv...