Question

我试图找到并回答我的问题，但我没有找到。我希望解决方案很简单，我只是觉得我犯了一些语法错误。

我想要实现的目标：我想通过JavaScript向我的"<dd>"添加新的"<dl>"元素。

<dd>元素内部会有一个<a>元素，例如：

"<dd><a href =...></a></dd>"

需要从表单中获取链接。

这是代码。我真的不知道如何完成它 - 只需从JavaScript开始。

<dl id="dl">
<dt>Menu</dt>
<dd><a href="index.html">Home</a></dd>
<dd><a href="galeria.html">Galeria</a></dd>
<dd><a href="canvas.html">Canvas</a></dd>
<dd><a href="ankieta.html">Ankieta</a></dd>
<dd><a href="query.html">JQuery</a></dd>
<dd><a href="mobilki.html">Mobilne</a></dd>
</dl>
<form method="post" id="formularz" onsubmit="myFunction3()">
<p><input type="text" name="link" id="link" value="Tutaj wpisz swój link"></p>
<p><input type="text" name="tytul" id="tytul" value="Tytuł linku"</p>
<p><input type="submit" name="submit" id="submit" value="Potwierdź"></p>
</form>
<script>
function myfunction3(){
var link  = document.getElementById("link");
var tytul = document.getElementById("tytul");
var dd = document.createElement("dd");
var dl = document.getElementById("dl");
var a = document.createElement("a");
a.href = link;
a.text = tytul;
dd.add(a);
dl.add(dd);

}   
</script>

提前感谢您的帮助！

我编辑了我的剧本。

Answer 1

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Page</title>
</head>

<body>
  <dl id="dl">
    <dt>Menu</dt>
    <dd><a href="index.html">Home</a>
    </dd>
    <dd><a href="galeria.html">Galeria</a>
    </dd>
    <dd><a href="canvas.html">Canvas</a>
    </dd>
    <dd><a href="ankieta.html">Ankieta</a>
    </dd>
    <dd><a href="query.html">JQuery</a>
    </dd>
    <dd><a href="mobilki.html">Mobilne</a>
    </dd>
  </dl>
  <form id="formularz">
    <input type="text" name="link" id="link" value="Tutaj wpisz swój link" />
    <br/>
    <input type="text" name="tytul" id="tytul" value="Tytuł linku" />
    <br/>
    <button name='submit'>Potwierdź</button>
    <br/>
  </form>
  <script>
    function $(sel) {
      return document.querySelector(sel);
    }
    $('#formularz').addEventListener('submit', function (e) {
      e.preventDefault();
      var link = $('#link'),
        tytul = $('#tytul'),
        el = document.createElement('dd');
      el.innerHTML = '<a href="' + link.value + '">' + tytul.value + '</a>';
      $('#dl').appendChild(el);
    });
  </script>
</body>

</html>

＆＃13;

此页面在提交表单时在#dl末尾添加了一个链接。此外，您可能需要查看这本关于Javascript的优秀免费书籍，以帮助您了解一些基础知识：Eloquent Javascript。

Answer 2

<script>
function myfunction3(){
var link  = document.getElementById("link");
var tytul = document.getElementById("tytul");
document.getElementById("dl").innerHTML = '<dt>Menu</dt>\
<dd><a href="index.html">Home</a></dd>\
<dd><a href="galeria.html">Galeria</a></dd>\
<dd><a href="canvas.html">Canvas</a></dd>\
<dd><a href="ankieta.html">Ankieta</a></dd>\
<dd><a href="query.html">JQuery</a></dd>\
<dd><a href="mobilki.html">Mobilne</a></dd>\
<dd>NEW ELEMENT HERE, where <a href="link"> tytul (title)</a></dd>';         
}   
</script>

编辑DOM / HTML元素

2 个答案: