128

can I convert a string to a html object? like:

string s = '<div id="myDiv"></div>';
var htmlObject = s.toHtmlObject;

so that i can later on get it by id and do some changing in its style

var ho = document.getElementById("myDiv").style.marginTop = something;

Thanx a million in advance, Lina

bombo
  • 1,781
  • 6
  • 22
  • 25
  • 1
    The [`template` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) works well for doing this, but if you need to do it using javascript, such as when developing browser extensions, use the [`insertAdjacentHTML` function](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) (see [Christian d'Heureuse's related answer](https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro#answer-46994943)) – Dave F Mar 23 '19 at 02:57

5 Answers5

134
var s = '<div id="myDiv"></div>';
var htmlObject = document.createElement('div');
htmlObject.innerHTML = s;
htmlObject.getElementById("myDiv").style.marginTop = something;
pawel
  • 35,827
  • 7
  • 56
  • 53
  • 9
    Yep, or just `htmlObject.firstChild` since you know that's where it'll always be. – bobince Mar 26 '10 at 18:35
  • 6
    This is not exactly correct, because you can not call getElementById on created htmlObject instance. – apocalypz Jun 04 '14 at 12:15
  • 2
    you could append the htmlObject to a document fragment in order to use getElementById, like `var fragment = document.createDocumentFragment(); fragment.appendChild( htmlObject ); fragment.getElementById("myDiv").style.marginTop = something;` – niall.campbell Apr 11 '17 at 02:53
63

You cannot do it with just method, unless you use some javascript framework like jquery which supports it ..

string s = '<div id="myDiv"></div>'
var htmlObject = $(s); // jquery call

but still, it would not be found by the getElementById because for that to work the element must be in the DOM... just creating in the memory does not insert it in the dom.

You would need to use append or appendTo or after etc.. to put it in the dom first..

Of'course all these can be done through regular javascript but it would take more steps to accomplish the same thing... and the logic is the same in both cases..

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • 69
    jQuery is cool but it's only JavaScript – Álvaro González Mar 26 '10 at 10:28
  • 1
    nice approach :) so i can write $(s).css("margin-top") to get the top margin and then modify it and write it to the page... I LOVE this answer :D – bombo Mar 26 '10 at 10:32
  • glad you like it Lina :) I think that size/properties would not be getable before inserting it to the DOM.. It makes sense, because an element would be influenced by where in the DOM it gets inserted.. but the reference to the object is still valid, so once you insert it in the DOM you can query its size properties like width/height/margins etc.. – Gabriele Petrioli Mar 26 '10 at 10:38
  • 1
    Please remove that part that says "you can only do it with jquery". that is plain wrong. – B. Kemmer Aug 17 '20 at 07:49
55

Had the same issue. I used a dirty trick like so:

var s = '<div id="myDiv"></div>';
var temp = document.createElement('div');
temp.innerHTML = s;
var htmlObject = temp.firstChild;

Now, you can add styles the way you like:

htmlObject.style.marginTop = something;
crownlessking
  • 1,182
  • 1
  • 17
  • 22
  • 1
    What if string is '
    more text'? It will return only
    – user7331530 Aug 21 '19 at 00:27
  • 2
    @user7331530 That's because `more text` is the second child. If you want everything, use `temp`. If you want `more text`, use `temp.childNodes[1]`. – crownlessking Aug 22 '19 at 20:06
  • it wont work if you try to parse something like `...` because `thead` is not allowed inside a div – AlexMorley-Finch Sep 22 '19 at 19:07
  • Note to those using this method, if you've created a multi-line string template, it's possible the first child will be a text node (white space at start of string). You may need to test/iterate to get the actual element. – Twifty Mar 02 '20 at 15:28
5

In addition to Gaby aka's method, we can find elements inside htmlObject in this way -

htmlObj.find("#box").html();

Fiddle is available here - http://jsfiddle.net/ashwyn/76gL3/

Ashwin
  • 12,081
  • 22
  • 83
  • 117
1

If the browser that you are planning to use is Mozilla (Addon development) (not sure of chrome) you can use the following method in Javascript

function DOM( string )
{
    var {Cc, Ci} = require("chrome");
    var parser = Cc["@mozilla.org/xmlextras/domparser;1"].createInstance(Ci.nsIDOMParser);
    console.log("PARSING OF DOM COMPLETED ...");
    return (parser.parseFromString(string, "text/html"));
};

Hope this helps

Prasad
  • 196
  • 9