关于jq 或者JS手动创建节点并赋属性值

Question

 domStr+="<td><input style='width:55px;' type=text id="model
"></td>";大家看这句,其实我是动态添加的行,每点一个按钮时候就动态添加的,但是我是以字符串拼接的,如果是按照节点创建怎么做,比如先创建一个tr 然后再创建一个td再td下面创建文本框再给文本框id 或者name 属性, 然后再添加样式

Answer 1

       //添加一个div 。table类似
       var objdiv = document.createElement("DIV");//创建DIV节点
        var objname="shop";//设置name属性
        objdiv.id = objname;//设置id
        objdiv.style.background = '#FFFF00';
        objdiv.style.width = 100;
        objdiv.style.height = 80;
        document.body.appendChild(objdiv);//将DIV加载到body中

Answer 2

var domStr+="<td><input style='width:55px;' type=text id="model
"></td>";
document.body.innerHTML = domStr;

Answer 3

这个我知道怎么加的我是用的jq append 加的, 我是说想把这些元素不用字符拼接用创建节点的方式
1 楼明白我的意思了,不过我只是想把这些节点都创建好了然后取出这个tr
$("#table").append(tr.innerHTML); 这样做, document.createElement这种可以,创建一个节点,如果我创建的是一个tr那我再创建一个td
td里面写内容,再把td加到tr里面, 最后我就知道该怎么做了.

Answer 4

用jq的话那不就是拼字符串然后append吗，id可以根据你自己的规律生成然后作为变量添加到html代码的字符串里面。
var tr = document.createElement("tr");
var td = document.createElement("td");
var input = document.createElment("input");
input.type="text";
input.id="txt1";
input.name="txt1";//ie貌似不能这么写
td.appendChild(input);
tr.appendChild(td);

Answer 5

    var tr = document.createElement("tr");//创建DIV节点
    tr.id = objname;
    var td = document.createElement("td");//创建DIV节点
    td.id = "td1";
    td.innerHTML = '111111';
    tr.appendChild(td);

Answer 6

var str = "<td><input style='width:55px;' type=text id="model
"></td>"
$(str)即可转换成jquery的对象
$("body").append($(str));
用jquery创建你的的对象
var tr = $("tr");
var td = $("td");
var inp = $("input");
inp.attr("type", "text");
inp.attr("name", "text1");
inp.attr("value", "10");
inp.css("width", "50");
td.append(inp);
tr.append(td);

Answer 7

var tr = $("tr");
var td = $("td");
var inp = $("input");
inp.attr("type", "text");
inp.attr("name", "text1");
inp.attr("value", "10");
inp.css("width", "50");
td.append(inp);
tr.append(td);这个有点意思，楼主你也可以直接添加html，就和你那样写一样

Answer 8

用   document.createDocumentFragment();效率比较高
再document.body.appendChild();