Question

我需要选择三种文本形式（a，b，c）的值，例如。 1,2,3。然后单击ADD，它将插入如下代码：

 <mycode a="1" b="2"><newone c="3"></newone></mycode>

我该怎么办？尝试不同的方法一段时间。

使用此代码我可以向页面添加新元素

<p> <span id="mytext"><a href="javascript:EditText()">click here</a></span></p>
<script type="text/javascript">
  function EditText() {
      document.getElementById('mytext').innerHTML = '<mycode a="1" b="2"><newone c="3"></newone></mycode>';
  }
</script>

但是如何使用文本形式编辑a，b和c值？

非常感谢！

Answer 1

假设您还希望能够将a，b和c的值传递给函数，并将其输出到新创建的DOM中。您可以执行以下操作：

function EditText(aVal, bVal, cVal) {
  document.getElementById('mytext').innerHTML = '<mycode a="'+aVal+'" b="'+bVal+'"><newone c="'+cVal+'"></newone></mycode>';
 }

每次点击都附加其他元素：

function EditText(aVal, bVal, cVal) {
  var currentInnerHtml = document.getElementById('mytext').innerHTML;
  document.getElementById('mytext').innerHTML = currentInnerHtml + '<mycode a="'+aVal+'" b="'+bVal+'"><newone c="'+cVal+'"></newone></mycode>';
 }

Answer 2

如果屏幕上有三个textarea，您可以使用JavaScript获取其值，然后将其添加到字符串中，而不是对其进行硬编码。

<textarea id="textA" cols="30" rows="10"></textarea>
<textarea id="textB" cols="30" rows="10"></textarea>
<textarea id="textC" cols="30" rows="10"></textarea>
<p> <span id="mytext"><a href="javascript:EditText()">click here</a></span></p>

<script>
  function EditText() {
    var textA = document.getElementById('textA').value;
    var textB = document.getElementById('textB').value;
    var textC = document.getElementById('textC').value;

    document.getElementById('mytext').innerHTML = '<mycode a="' + textA + '" b="' + textB + '"><newone c="' + textC + '"></newone></mycode>';
  }
</script>

使用JS将新代码插入页面，使用变量

2 个答案: