How to write inside a DIV box with javascript

Question

I'm making a mini-game where a player attacks a npc and in the center is a white box (div) that I call (log), because when the player damages/attacks the npc, I want to be able for that open white space to log what happened.

I'm using the getElementById(log) and then adding something along the lines of "document.write("You attacked X npc"), but its not working.

Any idea on how I can get text INSIDE the box and not outside it? Thanks

^ what he said. or just post your code. – Deryck Sep 15 '13 at 03:26 — Deryck, Sep 15 '13 at 03:26
Give div id `log` and use any one of the methods i listed – Muhammad Umer Jul 05 '15 at 16:49 — Muhammad Umer, Jul 05 '15 at 16:49

plalx · Accepted Answer · 2014-10-02T20:00:35.250

78

document.getElementById('log').innerHTML += '<br>Some new content!';

<div id="log">initial content</div>

edited Oct 02 '14 at 20:00

answered Sep 15 '13 at 03:26

plalx

42,889
6
74
90

score 43 · Answer 2 · edited Nov 12 '17 at 21:07

43

You can use one of the following methods:

document.getElementById('log').innerHTML = "text";

document.getElementById('log').innerText = "text";

document.getElementById('log').textContent = "text";

For Jquery:

$("#log").text("text");

$("#log").html("text");

edited Nov 12 '17 at 21:07

Paul Rooney

20,879
9
40
61

answered Jul 05 '15 at 16:41

Muhammad Umer

17,263
19
97
168

Do these all do the same thing? Are there more was to do the same thing? How do they differ from each other? – Musixauce3000 Mar 07 '16 at 16:00
2

innerHTML sets string as html, innerText set text as escaped string so it doesn't get interpreted as html , textContent edits text node directly. – Muhammad Umer Aug 04 '16 at 17:14
Does it mean that textContent escapes as well like innerText? – Timo Dec 06 '20 at 10:09

score 16 · Answer 3 · answered Sep 15 '13 at 03:26

16

HTML:

<div id="log"></div>

JS:

document.getElementById("log").innerHTML="WHATEVER YOU WANT...";

answered Sep 15 '13 at 03:26

Anshu Dwibhashi

4,617
3
28
59

score 2 · Answer 4 · edited Jul 05 '15 at 17:06

2

I would suggest Jquery:

$("#log").html("Type what you want to be shown to the user");

edited Jul 05 '15 at 17:06

joe_young

4,107
2
27
38

answered Oct 02 '14 at 21:10

4

Why jQuery for something so simple? – RickyAYoder Jan 05 '15 at 15:21

score 1 · Answer 5 · answered Jul 05 '15 at 16:32

If you are using jQuery and you want to add content to the existing contents of the div, you can use .html() within the brackets:

$("#log").html($('#log').html() + " <br>New content!");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log">Initial Content</div>

How to write inside a DIV box with javascript

5 Answers5

Linked