•  23-08-2019
  •  | 
  •  

سؤال

أتساءل عما إذا كانت هناك طريقة لتغيير نص أي شيء في HTML دون استخدام Innerhtml.

السبب في أنني أطلب لأنه عبوس كيندا من قبل W3C. أعلم أنه nitpicking، لكن أريد فقط أن أعرف، هل هناك طريقة؟

تحرير: يبدو أن الناس يسيئون فهم ما أسأل هنا: أريد أن أجد طريقة لتغيير النص الذي يتم عرضه بشكل فعال.

لو كنت أملك:

<div id="one">One</a>

Innerhtml يسمح لي بذلك:

var text = document.getElementsById("one");
text.innerHTML = "Two";

والنص على شاشتي سيتغير.
لا أرغب في إلحاق المزيد من النص، وأود أن أغير النص الموجود AllReady.

هل كانت مفيدة؟

المحلول

الطريقة الموصى بها هي من خلال التلاعب في الدوم، ولكن يمكن أن تكون مطاردة تماما. علي سبيل المثال:

// <p>Hello, <b>World</b>!</p>
var para = document.createElement('p');
para.appendChild(document.createTextNode('Hello, '));

// <b>
var b = document.createElement('b');
b.appendChild(document.createTextNode('World');
para.appendChild(b);

para.appendChild(document.createTextNode('!'));

// Do something with the para element, add it to the document, etc.

تعديل

ردا على تحريرك، من أجل استبدال المحتوى الحالي، يمكنك ببساطة إزالة المحتوى الموجود، ثم استخدم التعليمات البرمجية أعلاه لملء محتوى جديد. علي سبيل المثال:

var someDiv = document.getElementById('someID');
var children = someDiv.childNodes;
for(var i = 0; i < children.length; i++)
    someDiv.removeChild(children[i]);

ولكن كما قال شخص آخر، أود أن أوصي باستخدام شيء مثل jquery بدلا من ذلك، وكذلك جميع المتصفحات تدعم DOM بالكامل، وأولئك الذين لديهم quirks التي يتم التعامل معها داخليا بواسطة مكتبات JavaScript. على سبيل المثال، تبدو jQuery شيئا مثل هذا:

$('#someID').html("<p>Hello, <b>World</b>!</p>");

نصائح أخرى

أفضل طريقة للقيام بذلك هي استخدام document.createTextNode. وبعد أحد الأسباب الرئيسية لاستخدام هذه الوظيفة بدلا من innerHTML هل سيتم اعتبار أن جميع أحرف HTML يمكن الاعتناء بها بالنسبة لك في حين يجب عليك الهروب من سلسلة نفسك إذا كنت ببساطة الإعداد innerHTML.

يمكنك الحصول على نفس التأثير عن طريق معالجة DOM. الطريقة الأكثر أمانا لتغيير النص هي إزالة جميع العقدات الفرعية للعنصر واستبدالها بعقدة نصية جديدة.

var node = document.getElementById("one");

while( node.firstChild )
    node.removeChild( node.firstChild );
node.appendChild( document.createTextNode("Two") );

تخلص إزالة العقدات للطفل من المحتوى النصي لعنصرك قبل استبداله بالنص الجديد.

السبب في أن معظم المطورين يتجنبون استخدام Innerhtml هو أن الوصول إلى العناصر من خلال DOM متوافق مع المعايير.

إذا كنت ترغب فقط في تغيير النص العادي، فهناك حلا أسرع يعتمد على المعايير:

document.getElementById("one").firstChild.data = "two";

على أي حال، يرجى ملاحظة أن Innerhtml ستكون جزءا من معيار HTML 5 القادم.

بسيط.

يستبدل text.innerHTML = 'two' مع text.firstChild.nodeValue = 'two'.

var who=document.getElementById('one'), txt='new text';
if(who.innerText) who.innerText=txt;
else if(who.textContent) who.textContent= txt;

قد يكون هذا مرفوضا مثل Innerhtml إليك، ولكنه يحتوي على ميزة العمل في بعض الحالات (أي) حيث لا تعمل Innerhtml أو الملحق، مثل بعض العقد الجدول، نص عناصر النمط والبرنامج النصي وقيمة حقول النموذج

يمكنك استخدام DOM كما يلي:

<html>
<body>
<div>before</div>
<script type="text/javascript">
var element = document.getElementsByTagName("div")[0];
alert(element.firstChild.nodeValue);
element.removeChild(element.firstChild);
element.appendChild(document.createTextNode('after'));
alert(element.firstChild.nodeValue);
</script>
</body>

لكنني أعتقد أن أحدا نادرا ما يفعل ذلك ولكن استخدام إطار مثل jQuery. أو النموذج المبدئي أو أي إطار جافا سكريبت آخر هناك في حين أن. هذا هو مثال jQuery:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<div>before</div>
<script type="text/javascript">
var element = $("div");
alert(element.text());
element.text("after");
alert(element.text());
</script>
</body>

يبدو لي أن CSS + HTML + JS Model يجب أن يحقق التأثيرات المطلوبة:

.myelement:before {   
    content: attr(alt);
} 

...

<span class='myelement' alt='initial value'></span> 

...

element.setAttribute('alt', 'new value');

هل يعرف أحد إذا كان هذا يعمل في الممارسة العملية؟

حسنا IFI فهم سؤالك بشكل صحيح يجب أن يكون هذا إجابة.

var text = document.getElementById("one");
//text.innerHTML = "Two";
 text.childNodes[0].nodeValue="two";

تبحث أيضا عن بديل جيد للتجاوز element.innerHTML أخيرا وجدت هذا الحل:

HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString('<template>'+html+'</template>', 'text/html').head;
    this.appendChild(dom.firstElementChild.content);
}

//-- document.getElementById('my-id').innerHTML = string_of_html;
document.getElementById('my-id').htmlContent(string_of_html);

بديل آخر بدونu003Ctemplate> العلامات، ولكن حلقة بدلا من ذلك:

HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString(html, 'text/html').body;
    while (dom.hasChildNodes()) this.appendChild(dom.firstChild);
}

ضع في اعتبارك أن هذه الطريقة فعلا محتوى "إضافة" عند محتوى INNERHTML "استبدال" ...

هذا قد يساعد:

HTMLElement.prototype.clearContent = function()
{
    while (this.hasChildNodes()) this.removeChild(this.lastChild);
}

//-- document.getElementById('my-id').innerHTML = '';
document.getElementById('my-id').clearContent();

الوثيقة: https://github.com/swannty/escaping-innerhtml.
Perf https://jsperf.com/escaping-innerhtml.

أجدها أحيانا أنها مفيدة لتخزين مرجع مباشر إلى عقدة النص إذا كنت سأقوم بتحديثها بانتظام. أفعل شيئا مثل هذا:

var dynamicText = myDiv.appendChild(document.createTextNode("the initial text"));

ثم كلما أحتاج إلى تحديثه، أفعل هذا فقط:

dynamicText.nodeValue = "the updated text";

هذا يمنع الاضطرار إلى المشي دوم أو إضافة أو إزالة أي أطفال.

insertadjacenthtml () هو الطريق للذهاب. اقرأ أكثر:انقر للحصول على الوثائق

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top