将文本从div innerHtml复制到textarea

Question

与iframe问题相关的问题： 将div从父网站复制到iframe中的文本区域

我正在尝试将InnerHtml从div复制到TextArea。 我在同一网页上制作了两个Google翻译实例，并且尝试将第一个实例的自动更正应用于第二个实例，而又不更改第一个textarea 。

我尝试了不同的代码：

setInterval(function() {
childAnchors1 = document.querySelectorAll("#spelling-correction > a")[0];
$("#source")[1].val(childAnchors1.text());
 }, 100);

---

setInterval(function copyText() {
    $(".goog-textarea short_text")[1].val($("#spelling-correction > a")[0].innerText());
}
, 100);

---

setInterval(function copyText() {
    $("#source")[1].val($("#spelling-correction > a")[0].innertext());
}
, 100);

---

setInterval(function() {
 var finalarea = document.getElementsByClassName("goog-textarea short_text")[1];
var correction = document.querySelectorAll("#spelling-correction > a")[0].innerHTML
  document.getElementsByClassName("goog-textarea short_text")[1].value = correction.innerText;
}, 100);

---

onclick='document.getElementsByClassName("goog-textarea short_text")[1].innerHTML=document.getElementById("spelling-correction > a")[0].innerHTML;'

---

但是不幸的是，这些似乎都不起作用。

我将非常感谢您的帮助。

我应该提到这个。 我使用iframe创建第二个实例，因此简单的解决方案不起作用...这是我用于创建iframe实例的代码：

var makediv = document.createElement("secondinstance");
makediv.innerHTML = '<iframe id="iframenaturalID" width="1500" height="300" src="https://translate.google.com"></iframe>';
makediv.setAttribute("id", "iframeID");
var NewTranslator = document.getElementById("secondinstance");
var getRef = document.getElementById("gt-c");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(makediv, getRef);

我尝试使用它在iframe和父网站之间进行通信：

setInterval(function() {
    var childAnchors1 = window.parent.document.querySelectorAll("#spelling-correction > a");
    var TheiFrameInstance = document.getElementById("iframeID");
    TheiFrameInstance.contentWindow.document.querySelectorAll("#source").value = childAnchors1.textContent;
}, 100);

但这行不通...

好的，我可以使用：

var a = document.createElement('iframe');
a.src = "https://translate.google.com"; 
a.id = "iframenaturalID";
a.width = "1000";
a.height = "500";
document.querySelector('body').appendChild(a)

和

let iframe = document.getElementById("iframenaturalID");
setInterval(function() {
let source = iframe.contentWindow.document.getElementById("source");
let destination = window.parent.document.querySelector("#spelling-correction > a");


source.value = destination.textContent;
     }, 100);

现在它做了我想做的事情，但是我仍然收到错误消息： Uncaught TypeError: Cannot set property 'value' of null at eval ，它指向此行： source.value = destination.textContent; 。 虽然这不是一个大问题，但仍然奇怪的是它返回了这个错误...

好的，我可以通过添加setTimeout来解决它。

Answer 1

由于textarea是表单元素，因此.innerText或.innerHTML都不起作用。 您需要使用value属性（或使用JQuery的.val()提取其内容。

和仅供参考：

• 它是innerText ，而不是.innertext 。
• .innerText是属性，而不是函数，因此不要在其后使用() 。
• 它是.innerHTML ，而不是.innerHtml 。
• 当字符串中有应该解析为HTML的HTML，而.textContent用于不应解析为HTML的字符串时，将使用innerHTML 。 通常，您不会将一个内容映射到另一个。
• document.querySelectorAll()扫描整个DOM以查找所有匹配的节点。 如果您知道只有一个匹配节点，或者只想要第一个匹配节点，那将浪费资源。 而是使用.querySelector() ，它会在找到第一个匹配项后停止搜索。 由于您正在使用JQuery，因此在使用中应该保持一致。 使用JQuery不需要.querySelector()或.querySelectorAll() ，只需使用JQuery选择器语法即可。

这是一个示例，它使用您在问题中显示的HTML类型以及显示的相同id值和嵌套结构来显示原始JavaScript和JQuery方法。 您可以看到我正在使用不同的选择器来正确定位输入/输出元素。

 // Standare DOM queries to get standard DOM objects let source = document.getElementById("source"); let destination = document.querySelector("#spelling-correction > a"); // JQuery syntax to get JQuery objects: let jSource = $("#source"); let jDestination = $("#spelling-correction > a"); // Vanilla JavaScript way to set up the event handler and do the work source.addEventListener("keyup", function(){ destination.textContent = source.value; }); // JQuery way to set up the event handler and do the work jSource.on("keyup", function(){ jDestination.text(jSource.val()); }); 

 textarea, div { border:3px solid grey; width:500px; height:75px; font-size:1.5em; font-family:Arial, Helvetica, sans-serif; } .destination { pointer-events:none; background:#e0e0e0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Type in the first textarea</p> <textarea id="source"></textarea> <div id="spelling-correction"> Did you mean: <a href="#"></a> </div> 

Answer 2

您尝试过的所有代码中的问题是如何正确获取文本。

从第一个示例开始，它应该使用innerText而不是text()因为它是一个jquery对象，并且您返回的是DOM对象而不是jQuery对象：

setInterval(function() {
    childAnchors1 = document.querySelectorAll("#spelling-correction > a")[0];
    $("#source")[1].val(childAnchors1.innerText);
}, 100);

在第二个示例和第三个示例中 ，您需要从innerText删除括号，例如：

setInterval(function copyText() {
    $(".goog-textarea short_text")[1].val($("#spelling-correction > a")[0].innerText);
}, 100);

我建议使用纯js和textContent属性，例如：

setInterval(function() {
    var childAnchors1 = document.querySelectorAll("#spelling-correction > a")[0];
    document.querySelectorAll("#source")[1].value = childAnchors1.textContent;
}, 100);

注意：我应该指出您的HTML代码无效，因为当id属性在同一文档中唯一时，您正在使用重复标识符。