Creating a list of inputs using createElement()

Question

How would I create a list of the user's inputs using createElement()? Something so that when somebody adds text into the prompt("enter text") box, it displays on the screen. I've tried researching createElement(), but I'm still only able to display the latest input using a variable.

Edit:

<script>

function myFunction()
{
var user =prompt("Enter your name:")
var text =prompt("Hello " + user + ". Enter some text:")
count++;
document.getElementById("count").innerHTML=count;
document.getElementById("latest").innerHTML=text;
}

</script>

<p>Total: <span id="count">0</span></p>
<p>Latest blocked term: <span id="latest"></span></p>
<button onclick="myFunction()">Click</button>

I've cut off unrelated parts, so I hope this works.

Can you show what you are doing that works, please?

lonesomeday
– lonesomeday

2013-03-21 20:07:04 +00:00
Commented Mar 21, 2013 at 20:07 — lonesomeday
– lonesomeday, Commented Mar 21, 2013 at 20:07

Anoop · Accepted Answer · 2013-03-21 20:09:28Z

1

You need to create input box every time user enter text in prompt

function addInput(){
    var text = prompt("");
    var input = document.createElement('input');
    input.value = text;
    document.body.appendChild(input);

}

answered Mar 21, 2013 at 20:09

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

You have two options here.

The DOM way

This is the way that you are searching for with createElement. It is the best way in a sense, because it allows you to interact with the DOM as it already exists. You don't however need createElement: you should really use createTextNode, which does what it says on the tin:

function myFunction() {
    var name = prompt("Enter some text:"),
        node = document.createTextNode(name);
    document.getElementById('latest').appendChild(node);
}

jsFiddle example

(This results in adding the text to the end of the element: it does not remove the content that is already there.)

The realistic way

While using the DOM functions is all well and good, it is not really idiomatic Javascript. In reality, innerHTML is the property you should probably be using. Browsers are really good at parsing HTML (it's what they're built for, after all!) so this will almost certainly be quicker than the DOM method.

function myFunction() {
    var name = prompt("Enter some text:");
    document.getElementById('latest').innerHTML = name; // to overwrite the existing contents
    document.getElementById('latest').innerHTML += name; // to add to the existing contents
}

jsFiddle example

There are other ways, such as using createDocumentFragment, but this second method is almost certainly the way for you to go.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 21, 2013 at 20:27

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

1 Comment

user2166577 Over a year ago

Thank you. I didn't know about the += name; part. This really helped me.

Robin van Baalen · Accepted Answer · 2013-03-21 20:22:25Z

0

The super short way:

function renderInput(){
    document.getElementById("latest").innerHTML += prompt("What is your name?") + "<br />";
}

Using your example:

<script>
    function myFunction() {
        document.getElementById("latest").innerHTML += prompt("Enter some text:") + "<br />";
    }
</script>

<p>Latest text: <span id="latest"></span></p>

edited Mar 21, 2013 at 20:22

answered Mar 21, 2013 at 20:17

Robin van Baalen

3,6712 gold badges24 silver badges36 bronze badges

Collectives™ on Stack Overflow

Creating a list of inputs using createElement()

3 Answers 3

Comments

The DOM way

The realistic way

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

The DOM way

The realistic way

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related