Bir textNode öğesine bir öğe eklemek istiyorum. Örneğin: Öğenin textNode içinde bir dize arama işlevi var. Bulduğumda, bir HTML elemanı ile değiştirmek istiyorum. Bunun için bir standart var mı? Teşekkür ederiz.JavaScript: Öğe ekle öğesiNode
11
A
cevap
18
Yalnızca dizeyi değiştiremezsiniz, DOM'deki tüm TextNode elements can't contain child elements öğesinden beri tüm TextNode öğesini değiştirmeniz gerekir.
Yani, metin düğümü bulduğunda, yapılacak değişim unsuru oluşturmak, sonra da benzer bir işlevle metin düğümü değiştirin: Eğer yapmak istediğiniz görünen İçin
function ReplaceNode(textNode, eNode) {
var pNode = textNode.parentNode;
pNode.replaceChild(textNode, eNode);
}
, sen kırmak zorunda kalacak Mevcut Metin Düğümünü iki yeni Metin Düğümüne ve yeni bir HTML öğesine ayırmak. Burada doğru yönde Umarım bunu işaret edecek bazı örnek kod var:
function DecorateText(str) {
var e = document.createElement("span");
e.style.color = "#ff0000";
e.appendChild(document.createTextNode(str));
return e;
}
function SearchAndReplaceElement(elem) {
for(var i = elem.childNodes.length; i--;) {
var childNode = elem.childNodes[i];
if(childNode.nodeType == 3) { // 3 => a Text Node
var strSrc = childNode.nodeValue; // for Text Nodes, the nodeValue property contains the text
var strSearch = "Special String";
var pos = strSrc.indexOf(strSearch);
if(pos >= 0) {
var fragment = document.createDocumentFragment();
if(pos > 0)
fragment.appendChild(document.createTextNode(strSrc.substr(0, pos)));
fragment.appendChild(DecorateText(strSearch));
if((pos + strSearch.length + 1) < strSrc.length)
fragment.appendChild(document.createTextNode(strSrc.substr(pos + strSearch.length + 1)));
elem.replaceChild(fragment, childNode);
}
}
}
}
Belki jQuery bu daha kolay hale getirecek, ancak bu şeyler her bu şekilde işliyor anlamak için iyidir.
+0
Hiç bir örneğiniz var mı? Teşekkür ederim. – thomas
İlgili konular
- 1. Kotlin - ExpandableListView'e öğe ekle
- 2. DataBrow DropDownList'e öğe ekle
- 3. JavaScript: Birden çok öğe için tek bir sınıf ekle/kaldır
- 4. Metin seçiminden önce/sonra öğe ekle
- 5. Trigger Javascript Olayı DOM'a ekle
- 6. Sepete Ekle Filtre vs Splice ReactJS Javascript
- 7. Mongoose veritabanına birden çok öğe ekle
- 8. Javascript: Metne div ekle?
- 9. ABCPdf belge ekle javascript
- 10. Adblock. Css sınıfını ekle veya öğe
- 11. ruby dizisine öğe ekle new dizilimi döndür
- 12. C# Listeden öğe listesine ekle UserControl
- 13. Octopress mesajlarına javascript kütüphanesi ekle?
- 14. Kopma noktasını javascript dosyasına ekle
- 15. javascript ile sözde öğe denetimi
- 16. Düzenle veya Yeni öğe ekle listeden görünümü mvc
- 17. Yeniden ekleme eklenmeden PyMongo'daki MongoDB belge dizisine öğe ekle
- 18. Select2 Çoklu: Bir kopya ile birkaç öğe ekle + yapıştır
- 19. javascript ile src özniteliğiyle öğe al jquery
- 20. javascript kullanarak üst öğe nasıl bulunur?
- 21. Resim ekle MKPointAnnotation'a ekle
- 22. Jquery odak elemanına ekle
- 23. Listeye Öğe Ekleme
- 24. Öğe
- 25. Öğe
- 26. Öğe,
- 27. Öğe
- 28. Javascript
- 29. Javascript: Slice() ile diziden tüm ancak bir öğe seçin.
- 30. Prototip kitaplığı kullanarak javascript ile bir Öğe Seçeneği Ekleme
jQuery'yi kullanmak ister misiniz? –
Üzgünüz, yapamam. Ama BTW, çözümünüzü diğer kullanıcılara göster ... – thomas
Dize arama işleviniz var mı, yoksa siz de mi soruyorsunuz? – palswim