Question

我正在尝试将一个孩子添加到我的HTML文档中，尽管在我觉得很奇怪的屏幕上它没有弹出，但我可以在源代码中看到它。

这是我的HTML：

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form action="" enctype="multipart/form-data" method="post" id="myForm">
      <select name="type" id="selectedoption">
          <option value="">Välj typ här</option>
          <option value="photo">Foto</option>
          <option value="video">Video</option>
          <option value="audio">Ljud</option>  
      </select>
      <input type="text" name="title"> Titel
      <input type="submit" value="Spara media" class="btn">
    </form>
  </body>
</html>
<script src="test.js"> </script>

这是我的JS：

var iDiv = document.createElement('input');
iDiv.type = 'file';
iDiv.name = 'media';
iDiv.accept = 'image/*';
document.getElementById("selectedoption").appendChild(iDiv);

这是一个片段：

var iDiv = document.createElement('input');
iDiv.type = 'file';
iDiv.name = 'media';
iDiv.accept = 'image/*';
document.getElementById("selectedoption").appendChild(iDiv);

<form action="" enctype="multipart/form-data" method="post" id="myForm">
  <select name="type" id="selectedoption">
    <option value="">Välj typ här</option>
    <option value="photo">Foto</option>
    <option value="video">Video</option>
    <option value="audio">Ljud</option>  
  </select>
  <input type="text" name="title"> Titel
  <input type="submit" value="Spara media" class="btn">
</form>

我在这里到底在做什么错？。

Answer 1

您不能将input附加到select上。一个选择元素应该只包含option或optgroup标签。

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form action="" enctype="multipart/form-data" method="post" id="myForm">
      <select name="type" id="selectedoption">
          <option value="">Välj typ här</option>
          <option value="photo">Foto</option>
          <option value="video">Video</option>
          <option value="audio">Ljud</option>  
      </select>
      <input type="text" name="title"> Titel
      <input type="submit" value="Spara media" class="btn">
    </form>
  </body>
</html>
<script>
var iDiv = document.createElement('option');
iDiv.value = 'file';
iDiv.textContent = "File";
document.getElementById("selectedoption").appendChild(iDiv);
</script>

如果要将文件输入附加到表单，则应在表单上使用appendChild方法。

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form action="" enctype="multipart/form-data" method="post" id="myForm">
      <select name="type" id="selectedoption">
          <option value="">Välj typ här</option>
          <option value="photo">Foto</option>
          <option value="video">Video</option>
          <option value="audio">Ljud</option>  
      </select>
      <input type="text" name="title"> Titel
      <input type="submit" value="Spara media" class="btn">
    </form>
  </body>
</html>
<script>
var iDiv = document.createElement('input');
iDiv.type = 'file';
iDiv.name = 'media';
iDiv.accept = 'image/*';
document.querySelector('form').appendChild(iDiv);
</script>

将元素附加到HTML时看不到孩子

1 个答案: