发表新帖
发表新帖

Create a DOM document from string, without JQuery

后端 未结
关注
9 469
梦如初夏
梦如初夏 2020-12-05 14:12

We\'re looking for ways to create a DOM document in javascript from a string, but without using Jquery. Is there a way to do so? [I would assume so, since J

相关标签:
9条回答
  • 遥遥无期
    2020-12-05 14:20

    In case you're still looking for an anwer, and for anyone else coming accross it, I just have been trying to do the same thing myself. It seems you want to be looking at javascript's DOMImplementation:

    http://reference.sitepoint.com/javascript/DOMImplementation

    There are few references to compatibility as well here, but it's fairly well supported.

    In essence, to create a new document to manipulate, you want to create a new Doctype object (if you're going to output some standards based stuff) and then create the new Document using the newly created Doctype variable.

    There are multiple options to be put into both the doctype and the document, but if you're creating an HTML5 document, it seems you want to leave most of them as blank strings.

    Example (New HTML5 DOM Document):

    var doctype = document.implementation.createDocumentType( 'html', '', '');

var dom = document.implementation.createDocument('', 'html', doctype);

    The new Document now looks like this:

    <!DOCTYPE html>
<html>
</html>

    Example (New XHTML DOM Document):

    var doctype = document.implementation.createDocumentType(
    'html',
    '-//W3C//DTD XHTML 1.0 Strict//EN',
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'
);

var dom = document.implementation.createDocument(
    'http://www.w3.org/1999/xhtml',
    'html',
    doctype
);

    So it's up to you to populate the rest of it. You could do this as simply as changing

    dom.documentElement.innerHTML = '<head></head><body></body>';

    Or go with the more rigorous:

    var head = dom.createElement( 'head' );
var body = dom.createElement( 'body' );
dom.documentElement.appendChild(head);
dom.documentElement.appendChild(body);

    All yours.

    0 讨论(0)
  • 时光取名叫无心
    2020-12-05 14:21

    createDocumentFragment may help you.

    https://developer.mozilla.org/En/DOM/DocumentFragment

    Browsers always create document by themselves with empty page (about:blank). Maybe, in Chrome application there're some functions available (like XUL in FF), but there's no such function in ordinary javascript.

    0 讨论(0)
  • 天涯浪人
    2020-12-05 14:21 
    var dom = '<html><head>....</head><body>...</body></html>';

document.write(dom);
document.close();
    0 讨论(0)
  • 孤城傲影
    2020-12-05 14:21

    The DOM element has the property innerHTML that allows to change completely its contents. So you can create a container and fill it with a new HTML content.

    function createElementFromStr(htmlContent) {
  var wrapperElm = document.createElement("div");
  wrapperElm.innerHTML = htmlContent; // Ex: "<p id='example'>HTML string</p>"
  console.assert(wrapperElm.children.length == 1); //Only one child at first level.
  return wrapperElm.children[0];
}

    * I know it is an old question, but i hope to help someone else.

    0 讨论(0)
  • 盖世英雄少女心
    2020-12-05 14:23

    HTML would like this:

    <html>
<head></head>
<body>
    <div id="toolbar_wrapper"></div>
</body>
</html>

    JS would look like this:

    var data = '<div class="toolbar">'+
                '<button type="button" class="new">New</button>'+
                '<button type="button" class="upload">Upload</button>'+
                '<button type="button" class="undo disabled">Undo</button>'+
                '<button type="button" class="redo disabled">Redo</button>'+
                '<button type="button" class="save disabled">Save</button>'+
            '</div>';
document.getElementById("toolbar_wrapper").innerHTML = data;
    0 讨论(0)
  • 醉梦人生
    2020-12-05 14:27

    https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

    var parser = new DOMParser();
var doc = parser.parseFromString("<html_string>", "text/html");

    (the resulting doc variable is a documentFragment Object).

    0 讨论(0)
 看不清?
提交回复
热议问题