编辑 DOM/HTML 元素

Question

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

我想要实现的目标：我想通过 JavaScript.

添加一个新的 "<dd>" 元素到我的 "<dl>"

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

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

link 需要从表格中获取。

这是代码。我真的不知道如何完成它 - 只是从 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

<!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>

此页面在提交表单时在 #dl 末尾添加了一个 link。另外，您可能想看一下关于 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 元素

Editing a DOM/HTML Element

javascript

dom

getelementbyid