new line for title JavaScript

Question

I'm trying to put every new word for title on the new line using js. I tried different ways, but they don't work.

dictionary.title += word.value; - here I add attribute title for my dictionary class with word.value value. It comes together like: "HelloI'mJohn" instead of "Hello
I'm
John".
How can I do that on the new line using JavaScript code?

At least related: https://stackoverflow.com/questions/358874/how-can-i-use-a-carriage-return-in-a-html-tooltip — T.J. Crowder, May 08 '20 at 10:14
What is `dictonary`? What is `word.value`? **If** you're trying to have a multi-line tooltip by setting the `title` property of a DOM element, having newlines (`\n`) in the string should work. Example: https://jsfiddle.net/tjcrowder/0b5cta7f/ — T.J. Crowder, May 08 '20 at 10:15

Hitesh Kumar · Accepted Answer · 2020-05-08T10:29:27.053

0

Use

\n

or

br tag

for new line.

dictionary.title += word.value + "\n";

edited May 08 '20 at 10:29

answered May 08 '20 at 10:16

Hitesh Kumar

512
1
8
27

But the OP seems to be saying that they already have `\n` (not `/n`!) in the text, so this is already what they're trying to do. (And no, not a `
` tag.) – T.J. Crowder May 08 '20 at 10:17
It adds /n to the text, but doesn't switch to the new line: "Hello/nI'm/nJohn" – Dmitry Bochok May 08 '20 at 10:22

score -1 · Answer 2 · answered May 08 '20 at 10:41

Like in the above answers as said you can use <br> and \n for the new line but there are many alternative ways you can achieve this for your understand I have written a code where I used a

tag which is also called a block element where it takes given width and height and add a new line at the end automatically. There are many block-level elements you can also use for new lines.

let value = document.querySelector(".newInput");
let btn = document.querySelector("button");
let div = document.querySelector(".dictionary");


function storeValues(){
let dictionary = "";
if(value.value){
  dictionary += `<p>${value.value}</p>`
}

div.innerHTML += dictionary

}


btn.addEventListener("click", storeValues);

Enter Word: <input type='text' class='newInput'/>
 <button type='submit' class='newInput'>Submit</button>
 
 
 <div class='dictionary'>
 <!-- Dicitonary will appear here-->
 </div>

new line for title JavaScript

2 Answers2