2008-12-17 8 views
6

के बीच में एक नोड डालें, मैं दिए गए संदर्भ नोड के बाद या उससे पहले टेक्स्ट नोड्स डालने से परिचित हूं। लेकिन, मैं जानना चाहता हूं कि किसी दिए गए नोड में टेक्स्ट के बीच टैग कैसे डालना है। उदाहरण के लिए,टेक्स्ट

Before insertion: <p>Lorem dolor</p> 
After insertion: <p>Lorem <span>ipsum</span> dolor</p> 

अवधि नोड एक और एक और नोड के भीतर (मैं उपयोगकर्ता के कर्सर चयन स्थिति की जरूरत नहीं है) एन पात्रों के बाद डाला जाना चाहिए। क्या यह संभव है?

उत्तर

1

आप innerHTML संपत्ति नोड्स देख सकते हैं और उसे संशोधित कर सकते हैं। वैकल्पिक रूप से आप childNodes संग्रह देख सकते हैं और वहां तत्वों के साथ काम कर सकते हैं (पुराने टेक्स्ट नोड को हटाकर और इसके स्थान पर नए नोड्स डालने)।

11

आपको टेक्स्ट को एक चर में प्राप्त करने की आवश्यकता है और उसे DOM से हटा दें। इसे विभाजित करें, फिर पहले भाग को सम्मिलित करें, फिर अपने भाग नोड को दूसरे भाग में डालें।

var p = document.getElementById('myParagraph'); 
var text = p.childNodes[0]; 

// Split the text 
var len = 5 
var text1 = text.nodeValue.substr(0, len); 
var text2 = text.nodeValue.substr(len); 

var span = document.createElement('span'); 
span.appendChild(document.createTextNode(' dolor')); 

// Remove the existing text 
p.removeChild(p.childNodes[0]); 

// Put the new text in 
p.appendChild(document.createTextNode(text1)); 
p.appendChild(span); 
p.appendChild(document.createTextNode(text2)); 
+0

का उपयोग कर 'splitText' सरल है और कोड के कम लाइनों की आवश्यकता है जवाब। – Brigham

13

उचित तरीके (डोम कोर इंटरफेस का प्रयोग करके) होगा:

var p = document.getElementById('myParagraph'); 
var text = p.childNodes[0]; 
var at = 5; 

// create new span node with content 
var span = document.createElement("span"); 
span.appendChild(document.createTextNode('ipsum')); 

// Split the text node into two and add new span 
p.insertBefore(span, text.splitText(at));