Javascript 如何在div中获取带有内部html的标记？

我是javascript新手，这就是为什么我可能对

js

很差的原因

我正在尝试获取div父标记中的标记内部HTML

我尝试了很多次，但是，由于我的知识贫乏，我无法获得它的内部HTML。如果它的数据不能从数据库中获取，我可以很容易地获取它的内部HTML

这是我的HTML和php[获取数据]

    <?php
    mysql_connect("localhost", "root", "")or die("cannot connect to server"); 
    mysql_select_db("tsms")or die("cannot select DB");
    $sql = "select * from vendors";
    $result = mysql_query($sql);

    while($row=mysql_fetch_assoc($result))
    {
      echo '<div style="width:25%;margin-right:20px;margin-left:10px;cursor:pointer;" class="w3-third w3-section" id="home_vendorslist" onclick="gethead()">
            <div class="w3-card-4">
            <img src="'.$row["pic_path"].'" style="height: 200px;width: 100%">
            <div style="position: relative;" class="w3-container w3-white">
            <h4 id="venpichead" class="w3-center" style="color: black;">'.$row["heading"].'</h4>
            <p style="height: 100px;overflow: auto;">'.$row["body"].'</p>
            </div>
            </div>
            </div>';
    }
?>

我的主要问题是它每次只返回一个值[相同的值]

我在下面的图片中添加了我所有的div数据：

---

当我单击任何div时，它只返回（警报）仅“cisco”。为什么？任何解决方案？

在PHP中定义

原因是ID选择器（ID=“venpichead”）是唯一的，因此，只有第一个元素将保留此属性

解决方案是使用“class”属性，捕捉每个元素的事件：

<h4 class="venpichead" class="w3-center" style="color: black;" onclick="gethead">

function gethead()
{
    alert(this.innerHTML);
}

HTML中只能有一个
id
值的实例。您正在为
h4
元素创建具有相同“venpichead”
id
的每个供应商的标题

由于每个
id
都应该是唯一的，因此
getElementById
方法将只引用它找到的
id
的第一个实例（在本例中，该实例包含单词“CISCO”）

尝试将其更改为使用公共
类
，而不是
id
。但是，您还需要稍微更改一下逻辑，因为
getElementByClassName
将获取页面上的所有
h4
元素。因此，您需要循环遍历它们以找到所需的元素，或者缩小
getElementByClassName
的范围，以便它只找到您要查找的元素（例如，使用您单击的元素作为范围，而不是
document
）

注意：您还有一些其他的
id
值正在代码中重复。你也应该把它们清理干净
 因为id属性应该是唯一的。
getElementById（）方法返回具有该id的第一个元素。
您正在循环中运行echo，因此有多个元素具有该id。
您应该使用/创建唯一的id，而不是重复使用它们尽管下面的方法应该有效

将此
传递到您的
onclick
函数中，然后使用
querySelector（）
在元素内搜索

基本例子


函数gethead（el）{
警报（el.querySelector（'#venpichead'）.innerHTML）；
}

一个
两个
所有元素id必须唯一。当您在这样的循环中分配id时，您正在创建具有相同id的大量元素。id对于页面必须是唯一的。如果您有4个ID相同的
，则返回第一个
的值。但它可能不唯一，因为我的数据来自数据库。@nayanchowdhury它们绝对可以唯一。在循环中使用递增符，即
id=“venpichead-”.$i.“
=
venpichead-0
，
venpichead-1
，
venpichead-2
。如果我这样做，它将返回id home\u vendorslist中的所有内部html。但我只想要内部html。我已经更改了答案。我还将
home\u vendorslist
从id移到了
echo
第一行的类中。但我不明白为什么要将[0]与（“venpichead”）[0]一起使用。为什么不仅仅是（“venpichead”）。@nayanchowdhury
getElementsByClassName（）
可以返回多个元素，因此可以通过索引访问<代码>[0]
为您提供第一个匹配的元素。
getElementsByClassName（）
始终返回数组。因此，即使只有一个值，您也需要通过索引获取它的值。但是我想单击main的任何位置。上面的解决方案只允许我单击
while($row=mysql_fetch_assoc($result))
    {
      echo '<div style="width:25%;margin-right:20px;margin-left:10px;cursor:pointer;" class="w3-third w3-section home_vendorslist" onclick="gethead(this)">
            <div class="w3-card-4">
            <img src="'.$row["pic_path"].'" style="height: 200px;width: 100%">
            <div style="position: relative;" class="w3-container w3-white">
            <h4 class="w3-center venpichead" style="color: black;">'.$row["heading"].'</h4>
            <p style="height: 100px;overflow: auto;">'.$row["body"].'</p>
            </div>
            </div>
            </div>';
    }

function gethead(obj)
  {
     alert(obj.getElementsByClassName("venpichead")[0].innerHTML);
  }

<h4 class="venpichead" class="w3-center" style="color: black;" onclick="gethead">

function gethead()
{
    alert(this.innerHTML);
}

jQuery('.venpichead').click( function () {
    alert(jQuery(this).html());
});