通过ajax创建的html调用时，替换innerHTML不工作的方法

javascript replace method not working with innerHTML when called through ajax-created html

本文关键字：innerHTML 替换 工作 方法 ajax 创建 html 调用 通过      更新时间：2023-09-26

我现在已经花了好几天的时间来调试javascript中的一个简单的替换，这快把我逼疯了。非常感谢任何帮助。

当我创建一个简单的html文件，在标题中有一个javascript函数，并在正文中调用函数时，我可以获取元素的内容，并使用replace方法替换innerHTML中的某些字符，如换行符。我也可以使用jsfiddle。

toedit = toedit.replace(/'n/g, '<br />');

然而，在实际的应用程序中，我想使用它，其中的脚本是在页面的标题和html通过一些ajax放置在页面上的一个div，它失败了。有人能发现问题吗?

以下作品在HTML页面或JSFiddle

<html>
    <head>
    <script type="text/javascript">
    function editText(editThis)
      {
    alert(editThis);
    //alert("hi");
    var toedit = document.getElementById(editThis).innerHTML;
 //       alert(toedit);
    toedit = toedit.replace(/'n/g, '<br />');
    alert(toedit);
      }
    </script>
    </head>
    <body>
    <textarea id="text" name="text" rows=9 cols=30 placeholder="Type Notes">A whole bunch
     of text with
     line breaks goes here</textarea><a href="#" onclick="editText('text');return false;">edit</a>
    </body>
    </html>

下面的脚本不能运行在id后面有*的行。删除这一行后仍然有效。当一行被注释掉时，脚本中断。

页眉:

 <script type="text/javascript">
    function editText(editThis)
      {
         alert(editThis);
         //alert("hi");
         var toedit = document.getElementById(editThis).innerHTML;
         alert(toedit);
         toedit = toedit.replace(/'n/g, '<br />'); //****problem line
         alert(toedit);
      }
    </script>

//下面的函数从page调用，用包含上面链接的HTML填充divjs 

function loadSteps(id) 
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("stepsDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getsteps.php?id="+id,true);
xmlhttp.send();
} //end function

getsteps.php从上面的js函数调用

echo '<textarea id="text" rows=9 cols=30 placeholder="Type text">'.$text.'</textarea><a href="#" onclick="editText(''text'');return false">edit</a>

你设置的变量是innerHTML的副本，你需要直接更新innerHTML 

  document.getElementById(editThis).innerHTML=toedit;//once you've done your replace

但是为什么要在onreadystatechange中设置innerHTML呢?替换(/'n/g， '
')

一旦进入HTML，它可能不会保留换行符。

.responseText.replace(/'n/g, '<br />')

或

.responseText.replace(/'r'n/g, '<br />')

你的问题在下面一行:

var toedit = document.getElementById(editThis).innerHTML;

您正在抓取DOM对象的innerHTML，即id为"text"的文本区域。该对象的innerHTML没有更新。您需要的是文本区域的值，它将为您提供在文本区域中键入的实际文本。将上面提到的行修改为:

var toedit = document.getElementById(editThis).value;

那应该能解决你的问题!编码快乐!

相关文章：