Insert complex HTML with jQuery?

jquery append html
jquery insert large block of html
jquery create html
write html with jquery
jquery create nested elements
jquery create element with attributes
jquery create element with class
best way create html jquery

Is there a way to insert HTML like this with jQuery:

<p>Lorem Ipsum is <a href="somewhere">simply dummy</a> text of the printing and typesetting industry.<span style="color:red; font-size: 1.6rem;">*</span> <p>

I try with this but it only works without <a> and <span> but in console this return Uncaught SyntaxError: Unexpected token <

jQuery("div#webform-component-consent > .description").html(<p>Lorem Ipsum is 
<a href="somewhere">simply dummy</a> 
text of the printing and typesetting industry.
<span style="color:red; font-size: 1.6rem;">*</span>
</p>);

I also try with .append() but the result is the same. Do you think this is possible and how?


Just remove line breaks and put it inside quotes.

jQuery("div#webform-component-consent > .description").html('<p>Lorem Ipsum is <a href="somewhere">simply dummy</a> text of the printing and typesetting industry. <span style="color:red; font-size: 1.6rem;">*</span></p>');
<div id="webform-component-consent">
  <div class="description"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

creating DOM elements with jQuery in a more elegant way (Example), html($('<div>', {class: 'spinner'}));. It also makes it easier if you have dynamic properties, such as id created from a primary key, a conditional class  Building Complex HTML Elements. When you are building more complex HTML, things get a little hairy in the code. Take our previous example with jQuery and turn it into raw HTML building:


You can use string between ` i.e. Template literals so that you can use multi-line strings and " (double quote) inside string.

jQuery("div#webform-component-consent > .description").html(`<p>Lorem Ipsum is 
<a href="somewhere">simply dummy</a> 
text of the printing and typesetting industry.
<span style="color:red; font-size: 1.6rem;">*</span>
</p>`);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="webform-component-consent">
  <div class="description">
  </div>
</div>

JQuery, The more complex the logic, the messier and less maintainable the code becomes. So here is a more elegant way of writing the same code,  jQuery Insert Content. In this tutorial you will learn how to insert new elements or contents to the document using jQuery. jQuery Insert New Content. jQuery provides several methods, like append(), prepend(), html(), text(), before(), after(), wrap() etc. that allows us to insert new content inside an existing element.


Use InnerHTML and "\" before double quotes:

document.getElementsByClassName("analyseButtonImage")[i].innerHTML = "<p>Lorem Ipsum is <a href=\"somewhere\">simply dummy</a> text of the printing and typesetting industry.<span style=\"color:red; font-size: 1.6rem;\">*</span> <p>";

Three Ways to Create DOM Elements Without jQuery, I show three different ways to add new DOM elements to your web page It seems a lot of people I meet know how to use jQuery to create new DOM In this code we created a <div> element, set it's HTML to be all of our  When passing HTML string to jQuery ( html ) it will look for HTML tags (ex: <tag >) somewhere within the string. Then, it attempts to create new DOM elements as described by the HTML string. But, be ware of that: in complex HTML strings, some browsers may not generate a DOM that replicates


Consider this;

var htmlString = `<p>Lorem Ipsum is <a href="somewhere">simply dummy</a> text of the printing and typesetting industry.<span style="color:red; font-size: 1.6rem;">*</span> <p>
`;

// you can choose your element, for sake of example we are using P tag;

$("p").append(htmlString);

Building HTML in jQuery and JavaScript, Ways to create HTML with jQuery and JavaScript. some links to templating libraries for building more complex HTML. 'insert'] var html = '' for (var i = 0; i < data.length; i++) { html += '' + data + '' } $('#tablerow').append(html). A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments. jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content. Within the function, this refers to the current element in the set.


Manipulating Elements, Among the most common tasks is changing the inner HTML or attribute of insertAfter() method places the selected element(s) after the element provided but the .attr() method also allows for more complex manipulations. jQuery after() and before() Methods. The jQuery after() method inserts content AFTER the selected HTML elements. The jQuery before() method inserts content BEFORE the selected HTML elements.


.prepend(), A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at the beginning of each element in the set of matched elements. A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, this refers to the current element in the set.


jQuery, How to use complex HTML with twitter Bootstrap tooltip using jQuery ? How to reset How to add active class on click event in custom list group in Bootstrap 4 ? jQuery HOME jQuery Intro jQuery Get Started jQuery Syntax jQuery Selectors jQuery Events jQuery Effects jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animate jQuery stop() jQuery Callback jQuery Chaining jQuery HTML jQuery Get jQuery Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions jQuery Traversing