All geek questions in one place

What is better for DOM manipulation - DOM API or innerHTML?

I have the following code:

tr = document.createElement("tr");
root.appendChild(tr);
td = document.createElement("td");
td.appendChild(document.createTextNode("some value"));
tr.appendChild(td);

Well, this code is the same as

root.innerHTML = "<tr><td>some value</td></tr>";

The first version is probably the best way, because the browser does not need to display a string. But it is too long. Especially for large structures, this implementation becomes very difficult to read. So I felt that there is a better way to write this (without any JavaScript library). How would you implement this to make the code more readable? (Now I am sharing the code with comments.)

+3
source share
9 answers

You can always write wrapper functions around a clumsy DOM API to make the code more readable. Usually I use something like:

function newElement (type,attr,children) {
    var el = document.createElement(type);
    for (var n in attr) {
        if (n == 'style') {
            setStyle(el,attr[n]); /* implementation of this function
                                   * left as exercise for the reader
                                   */
        }
        else {
            el[n] = attr[n];
        }
    }
    if (children) {
        for (var i=0; i<children.length; i++) {
            el.appendChild(children[i]);
        }
    }
}
function newText (text) {
    document.createTextNode(text);
}

:

var tr = newElement('tr',{},[
    newElement('td',{},[
        newText('some value')
    ])
]);

css javascript:

var div = newElement('div',{
    className:'foo',
    style:{
        marginLeft:'10px'
    }
},[
    newText('notice we use "className" instead of class" '+
            'and "marginLeft" instead of "margin-left"')
]);
+5

innerHTML , DOM (. ). HTML- innerHTML, , :

var html = [
   '<ul class="myclass">',
      '<li class="item">item1</li>',
      '<li class="item">item2</li>',
      '<li class="item">item3</li>',
      '<li class="item">item4</li>',
      '<li class="item">item5</li>',
   '</ul>'
].join("");

root.innerHTML =html;
+2

, innerHTML , DOM, .

, DOM, , DOM 2:

var tr = root.insertRow(-1);
var td = tr.insertCell(0);
var txt = document.createTextNode("some value");
td.appendChild(txt);
// or simply: td.innerHTML = "some value";
+1

, , . - , .

Android- :

      DOM: 614 / 25
innerHTML: 697 / 542
      DOM: 546 / 18
innerHTML: 639 / 552
      DOM: 604 / 12
innerHTML: 641 / 534
      DOM: 619 / 11
innerHTML: 643 / 554
      DOM: 618 / 13
innerHTML: 655 / 600

- 2700 li . - , ol, , innerHTML = '';

DOM vs innerHTML.

+1

innerHTML, -, IE.

, , ,

root.innerHTML = "<tr><td>some value</td></tr>";

, innerHTML , , . KennyTM , .

, , , DOM API innerHTML.

0

jQuery http://jquery.com/

$('#root tbody').append('<td><td>some value</td></td>');

DOM.

: jQuery:

jQuery - JavaScript, HTML-, , Ajax . jQuery JavaScript.

** EDIT: ** , HTML- @koby;)

0

,

var d = document;
td = d.createElement("td");
tr = d.createElement("tr");
td.appendChild( d.createTextNode("some value") );
tr.appendChild(td);
root.appendChild(tr);
0

, innerHTML DOM API. DOM API .

( Firefix 3.6.8 Chrome 5.0.375.125 beta): http://yilmazhuseyindevelopment.appspot.com/ois/images/ahh5aWxtYXpodXNleWluZGV2ZWxvcG1lbnRyEQsSCUltYWdlRGF0YRiptwUM

1000 DOM API innerHTML.

DOM API HTML. :

<html>
    <head>
        <script type="text/javascript">
        window.onload = function(){
            var body = document.getElementsByTagName("body")[0];
            var text,table,tr,td;
            var count = 1000;
            console.time("DOM");
            for(var i = 0 ; i<count ; i++){
                    text = document.createTextNode("text");
                    body.appendChild(text);
                    body.removeChild(text)
            }
            console.timeEnd("DOM");
            console.time("innerHTML");
            for(var i = 0 ; i<count ; i++){
                body.innerHTML = "text";
                body.innerHTML = "";
            }
            console.timeEnd("innerHTML");
            //table structure
            console.time("DOM2");
            for(var i = 0 ; i<count ; i++){
                    table = document.createElement("table");
                    tr = document.createElement("tr");
                    td = document.createElement("td");
                    text = document.createTextNode("text");
                    table.appendChild(tr);
                    tr.appendChild(td);
                    td.appendChild(text);
                    body.appendChild(table);
                    body.removeChild(table);
            }
            console.timeEnd("DOM2");
            console.time("innerHTML2");
            for(var i = 0 ; i<count ; i++){
                body.innerHTML = "<table><tr><td>text</td></tr></table>";
                body.innerHTML = "";
            }
            console.timeEnd("innerHTML2");
        }
        </script>
    </head>

    <body/>
</html>

, , DOM API ( ) .

0

JavaScript?

HTML innerHTML , DOM, , , .

PURE, HTML JavaScript. .

, , .

0

Source: https://habr.com/ru/post/1758859/

More articles:


All Articles