Creating a New Dom Element from an HTML String Using Built-In Dom Methods or Prototype

Creating a new DOM element from an HTML string using built-in DOM methods or Prototype

Note: most current browsers support HTML <template> elements, which provide a more reliable way of turning creating elements from strings. See Mark Amery's answer below for details.

For older browsers, and node/jsdom: (which doesn't yet support <template> elements at the time of writing), use the following method. It's the same thing the libraries use to do to get DOM elements from an HTML string (with some extra work for IE to work around bugs with its implementation of innerHTML):

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes.
  return div.firstChild;
}

Note that unlike HTML templates this won't work for some elements that cannot legally be children of a <div>, such as <td>s.

If you're already using a library, I would recommend you stick to the library-approved method of creating elements from HTML strings:

• Prototype has this feature built-into its update() method.
• jQuery has it implemented in its jQuery(html) and jQuery.parseHTML methods.

In javascript, how can I create element which has many attributes with createElement() in one line?

If you want a one-liner, you could use:

Object.assign(document.createElement('div'), {className: 'check', innerHTML: '<input type="checkbox" name="buy" value="260" checked="" onclick="javascript:basket.checkItem();"> '})

Or, better readable:

Object.assign(document.createElement('div'), {
  className: 'check',
  innerHTML: '<input type="checkbox" name="buy" value="260" checked="" onclick="javascript:basket.checkItem();"> '
})

Converting HTML string into DOM elements?

You can use a DOMParser, like so:

var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";

var doc = new DOMParser().parseFromString(xmlString, "text/xml");

console.log(doc.firstChild.innerHTML); // => <a href="#">Link...

console.log(doc.firstChild.firstChild.innerHTML); // => Link

javascript: create HTMLElement from string

You can create some dummy outer element:

  var div = document.createElement('DIV');

and then:

  div.innerHTML = '<table class="list"><tr><td><a href="xxx">title</a></td></tr></table>'

and then extract it from childNodes:

  div.firstChild

innerHTML is a Microsoft extension, but one universally supported on all modern browsers.

Of course you can form a simple function which does what you want from these snippets.

JavaScript / HTML work with DOM, Button which count click and make new string every time when I click

You just need to move the counter initialization outside of the function scope

I've tweaked your code a bit.

Note: try not using inline event listeners, instead use event listeners in JavaScript file

let counter = 0;

const button = document.querySelector('input');

function add_count() {
  let integer = (() =>  counter++);
  const tag = document.createElement("p");
  const text = document.createTextNode(integer());
  tag.appendChild(text);
  const element = document.body
  element.appendChild(tag)
};

button.addEventListener('click', add_count)

<form action="#">
  <input type="button" value="Count">
</form>

Can a new HTML element with a specific class name be created with JavaScript?

as @Mina said , you can use the element.classList.add("myClass").

Wants to call methods from string but using prototype doesn't work

That's because your this context looks on myMethod object. You don't have any variables in this object that you declared in MyClass

Try to declare myMethod via anonymous function (read comment in code)

MyClass.prototype.myMethod = function() {
// here you have context `this` of MyClass
// you can save `this` in variable and use it in object below
return {
addA: function(num) {
  console.log(this);
  this.a += num;
},
addB: (num) => {
  this.b += num;
},
mulA: (num) => {
  this.a *= num;
},
mulB: (num) => {
  this.b *= num;
},
// and many more methods
}
};

Converting an HTML string to a DOM element?

Create a temporary container for your HTML, then gets its content. Something like:

var d = document.createElement('div');
d.innerHTML = some_html;
return d.firstChild;

---

Related Topics