在页面上的特定单词后插入换行符

Question

I am trying to edit this code,

I have a list of people on my page in horizontal order, but i would like to insert a linebreak after a specific person's name.

I have a div for my line break. It's <div class="newline">

$(window).load( function(){
  $("#peoplelist p").text("Roger John");
  var html = $(this).html().split(" ");
  html = html[0] + "<br>" + html.slice(1).join(" ");
  $(this).html(html);
});    

but this is not working, can someone help me with this?

Answer 1

If you know the persons name you can just do this, no need for arrays and joining and what not:

Fiddle: http://jsfiddle.net/9CdtL/

HTML

<div id="peoplelist"><p>Chris Jean, Vic Sen, Roger John, Dan Vany</p></div>

JS

$(window).on('load',function(){
    //here I set the name-var to the name I want the linebreak after
    //Now this is quite static, but this could of course also be done using data from a database or something.
    var name = 'Roger';

    //Here I insert the linebreak after the name using 'replace()'
    $('#peoplelist p').html($('#peoplelist p').html().replace(name+' ',name+'<br>'));
});

The main line is this: [string].replace(name+' ', name+'<br>');

---

EDIT

I changed the whole answer. Sorry, I should have been more clear that the previous answer only showed your result in the Console, nowhere on the page. It does now.

BTW , your use of $(this) is wrong, one of the reasons your code isn't working. You can only use $(this) inside the action-function of an element.
You are just using it on the next line from the $("#peoplelist p").text("Roger John"); line.
Technically, in your case $(this) refers to the window-object, because it's inside the window-load-function. But that won't work anyway because the window isn't an element on your page that can hold content.

Answer 2

It's not working because your $(this) is refering to the window.

You should try this and reference the object directly.

$(window).load(function(){
    var $listp = $("#peoplelist p")

    $listp.text("Roger John");

    var html = $listp.html().split(" ");
    html = html[0] + "<br>" + html.slice(1).join(" ");
    $listp.html(html);
});

Answer 3

I'm not sure if it's the most elegant solution, but what worked well for me was emptying the text out, and then replacing it via a '.wrapInner()' function (which can incorporate HTML):

$('#peoplelist p').text('');

$('#peoplelist p').wrapInner('Chris<br>Jean<br>Vic<br>Sen<br>Roger<br>John<br>Dan<br>Vany');

http://jsfiddle.net/h1d78sm9/1/