Creating a Carriage Return Button in JavaScript

Question

I'm trying to create a button that when clicked, creates a carriage return. For example, at the top of my webpage there are buttons that output words when clicked. Upon the click of the next button, the new word is placed immediately after the other words. I need this button to create a new line for the output words above it. I've tried a few codes along the lines of this:

<input type="button" value="Return"
onclick="document.getElementById('outputDiv').innerHTML=
document.getElementById('outputDiv').innerHTML + \br;">
<div id="outputDiv"></div>

Any help would be greatly appreciated.

Paul S. · Accepted Answer · 2015-04-18 21:25:23Z

1

Try to avoid using .innerHTML, instead consider the DOM methods of node.appendChild and document.createElement

function newline() {
    document.getElementById('outputDiv').appendChild(
        document.createElement('br')
    );
}
// after input exists, select it with your favourite method to attach listener
document.querySelector('input[value="Return"]').addEventListener(
    'click',
    newline
);

When attached this way the HTML doesn't need an onclick attribute anymore either

<input type="button" value="Return" />
<div id="outputDiv"></div>

DEMO

answered Apr 18, 2015 at 21:25

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sarah Over a year ago

I'm still having some issues implementing this. I've been editing this coding now, and just need to figure out how to achieve the output. <script> var btn = document.createElement("BUTTON"); var t = document.createTextNode("Return"); btn.appendChild(t); document.body.appendChild(btn); </script>

Collectives™ on Stack Overflow

Creating a Carriage Return Button in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related