javascript - 获取元素innerHTML并添加到列表

我有一张桌子和一张桌子。我希望用户单击表中的项目，并将单元格中的文本添加到列表中。

function history_buff(obj){

    var elList = Document.getElementById("user_history");


    //alert("Trying to add item " + obj);
    var element = Document.getElementById(str(obj))
    var text = element.innerText || element.textContent;
    var user_item = element.innerHTML = text;

    alert("Trying to add: "  + user_item)


    var li = document.createElement("li");

    li.innerHTML = user_item.value;

    elList.appendChild(user_item);
}

function welcome(){
    alert("Welcome home!");
}

这是HTML：

    <div class="block" id="one">
        <table id="name_table">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Job</th>
            </tr>
            <tr id="name_1">
                <td><a onclick="history_buff();" href="static\text_files\alex.txt">Alex</a></td>
                <td onclick="welcome();">12</td>
                <td>Analyst</td>
            </tr>
            <tr id="name_2">
                <td><a href="static\text_files\bill.txt">Bill</a></td>
                <td>54</td>
                <td>Car Salesman</td>
            </tr>
            <tr id="name_3">
                <td><a id="item_3" href="static\text_files\Rodrigo.txt">Rodrigo</a></td>
                <td>7</td>
                <td id="job_3" onclick="history_buff(this.id)">Merchant</td>
            </tr>
        </table>
    </div>
    <div class="block" id="two">
        <h2>History</h2>
        <ul id="user_history">
            <li>Nothing</li>
            <li>Something</li>
        </ul>
    </div>

我尝试了许多与此类似的方法，但似乎无法理解。

最佳答案

您的函数中存在一些错误。这是一个固定的工作版本：

function history_buff(obj) {
  var elList = document.getElementById("user_history");
  //alert("Trying to add item " + obj);
  var element = document.getElementById(obj)
  var text = element.textContent;
  var user_item = text;

  alert("Trying to add: " + user_item);

  var li = document.createElement("li");

  li.innerHTML = user_item;

  elList.appendChild(li);
}

function welcome() {
  alert("Welcome home!");
}

<div class="block" id="one">
  <table id="name_table">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
    </tr>
    <tr id="name_1">
      <td><a href="static\text_files\alex.txt">Alex</a></td>
      <td onclick="welcome();">12</td>
      <td id="job_1" onclick="history_buff(this.id)">Analyst</td>
    </tr>
    <tr id="name_2">
      <td><a href="static\text_files\bill.txt">Bill</a></td>
      <td>54</td>
      <td id="job_2" onclick="history_buff(this.id)">Car Salesman</td>
    </tr>
    <tr id="name_3">
      <td><a id="item_3" href="static\text_files\Rodrigo.txt">Rodrigo</a></td>
      <td>7</td>
      <td id="job_3" onclick="history_buff(this.id)">Merchant</td>
    </tr>
  </table>
</div>
<div class="block" id="two">
  <h2>History</h2>
  <ul id="user_history">
    <li>Nothing</li>
    <li>Something</li>
  </ul>
</div>

但是，这并不是最好的处理方式。

关于javascript - 获取元素innerHTML并添加到列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49503523/