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>

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>

• javascript
• html
• insert
• block

Share Improve this question Follow edited Jan 20, 2015 at 1:58 Martijn Melchers 801313 bronze badges asked Jan 20, 2015 at 0:34 trevren11trevren11 31211 gold badge55 silver badges1010 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 0

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>';

.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.

You may check this fiddle:

http://jsfiddle/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>';
};

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 prepile your templates.

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

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