divの各行の先頭に特定の文字を追加する方法はありますか？ （javacsript）私はのようなHTML要素に各行の先頭に文字を追加したい

Question

：https://jsfiddle.net/wna21a1q/

を私が行うことができますどのようにwhith JS（：

<div id="container"> 
    <p>first part here !</p> 
    but they is text here too 
    <span>and bla bla bla</span> 
    foo 
    <p>bar</p> 
    baz 
</div> 

がレンダリング

<div id="container"> 
    <p>#first part here !</p> 
    #but they is text here too 
    <span>#and bla bla bla</span> 
    #foo 
    <p>#bar</p> 
    #baz 
</div> 

を期待またはjQuery）？

同様：

$('#container').addAtEachLine('#') 

Answer 1

することはでき内容をループ：

$("div").contents().each(function() { 
 
    if(this.nodeType==1) { //is an element 
 
    $(this).prepend(document.createTextNode("#")) 
 
    } else if ($.trim(this.nodeValue).length){ //text node that is more than a return 
 
    this.nodeValue = "#" + this.nodeValue; 
 
    } 
 
})

span { display: block }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p>first part here !</p> 
 
    but they is text here too 
 
    <span>and bla bla bla</span> 
 
    foo 
 
    <p>bar</p> 
 
    baz 
 
</div>

Answer 2

@epascarelloが既にこの質問にスーパー答えを提供してきました。私はそれを使いこなしていて、コードを少し凝縮させる方法を見つけました。おそらくない、みんなのお気に入りが、それは、単一の行に実際の先頭に追加アクション削減：

$("div").contents().each((i,obj)=>{ 
 
    var p=['','innerHTML','','nodeValue'][obj.nodeType]; // pick method for text access 
 
    var t=obj[p].trim();  // get text and remove surrounding blanks 
 
    if(t.length) obj[p]='#'+t; // if text>"" prepend a "#" 
 
})

span { display: block }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p>first part here !</p> 
 
    but they is text here too 
 
    <span>and bla bla bla</span> 
 
    foo 
 
    <p>bar</p> 
 
    baz 
 
</div>

Answer 3

、ここで私のvanilla.jsバージョンを。

var el = document.querySelector('div'); 
 

 
function addchar(item) { 
 

 
    var childNodes = item.childNodes; 
 
    var countNode = childNodes.length; 
 

 
    for (var i = 0; i < countNode; i++) { 
 
    if (childNodes[i].nodeType !== 3) { 
 
     addchar(childNodes[i]); 
 
    } else { 
 
     if (childNodes[i].nodeValue.trim()) { 
 
     childNodes[i].nodeValue = "# " + childNodes[i].nodeValue; 
 
     } 
 
    } 
 
    } 
 
} 
 

 
addchar(el);

span {display:block}

<div> 
 
     <p>first part here !</p> 
 
     but they is text here too 
 
     <span>and bla bla bla</span> 
 
     foo 
 
     <p>bar</p> 
 
     baz 
 
    </div>