'How to insert html from a button click

I am trying to insert a form when a button is clicked but cannot find a way that does not make me put all of the HTML on one line with back slashes or many ugly lines of code. Something that does not include adding on something line jQuery or php.

In essence: How can I make this...(that is all on one line)

<script> function newMsg() { document.getElementById("add_message").innerHTML = "<div class=\"message\">Add Message<br>Title: <input type=\"text\" id=\"title\"><br>Text: <input type=\"text\" id=\"message\"><br><br></div>"; } </script>

Look a little more something like this (that has good formatting and on multiple lines)

<script>function newMsg() {function newMsg() {
document.getElementById("add_message").innerHTML = 
"<div class="message">Add Message<br>
Title: <input type="text" id="title"><br>
Text: <input type="text" id="message"><br><br>
</div>";
}
</script>
javascripthtmlinsertblock


Solution 1:[1]

Simply replace the first and last " of the right hand side with ' and remove all \ like this :

document.getElementById("add_message").innerHTML = '<div class="message">Add Message<br>Title: <input type="text" id="title"><br>Text: <input type="text" id="message"><br><br></div>';

Solution 2:[2]

.innerHTML = '<div class="message">Add Message<br>'
+ 'Title: <input type="text" id="title"><br/>' 
+ 'Text: <input type="text" id="message"><br/><br/></div>';

You can do what hamism suggested as well as concatenate if one line is too long, this way you can make your code look slightly cleaner.

Solution 3:[3]

You may check this fiddle:

http://jsfiddle.net/7sqha4ks/

function myFunction(){
document.getElementById("add_message").innerHTML = 
'<div class="message">Add Message<br>Title: <input type="text" id="title">      
 <br>Text: <input type="text" id="message"><br><br></div>';
};

Solution 4:[4]

If you're issue is just with formatting, you can use an array of lines and the join array method like this:

var html = [
    '<div class="message">Add Message<br>',
        'Title: <input type="text" id="title"><br>',
        'Text: <input type="text" id="message"><br><br>',
    '</div>'
].join("\n");

Alternatively, you could use a templating language such as Handlebars or Jade and precompile your templates.

Alternatively, you could use a multiline string hack like this: https://github.com/sindresorhus/multiline

Solution 5:[5]

If you wanna get it on separate lines like that for easier readability create your html as a variable and concatenate with the "+" symbol. Also use single quotes for any quotes inside of the main html. Something like:

var html = "<div class='message'>Add Message<br>"
 + "Title: <input type='text' id='title'><br>"
 + "Text: <input type='text' id='message'><br><br>"
 + "</div>";

document.getElementById("add_message").innerHTML = html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ismnoiet
Solution 2 Royalty
Solution 3 Rakesh_Kumar
Solution 4 SimpleJ
Solution 5 nbarth

Related Questions