Question

编辑：感谢您提供有用的答案！不过，我仍然在努力将输入打印到“正确的”div。我错过了什么？

在输入字段旁边，有一个选项可以选择“左”或“右”。根据选择，只需单击按钮即可向左或向右打印输入。这就是我所拥有的 - 但无论选择如何，它都只会向左打印。

    jQuery(document).ready(function(){

        $('.button').click(function(){
        $('.input').val();
        if ($('select').val() == "left"){
            $('div.left').html($('.input').val());
            }
        else {
            $('div.right').html($('.input').val());
            }

        });
    });

    </script>

很抱歉，如果这是非常基本的 - 我是JS和jQuery的新手。

我正在尝试将表单中的输入打印到div中。这是源HTML修改的一部分（适用于大学课程）：

            <input type="text" class="input">

            <div class="left">

            </div>
            <div class="right">

            </div>

基本上，文本输入到字段中，我需要在单击按钮时将此文本打印到“左”或“右”div。

到目前为止，我只处理过具有ID的div，所以我使用了

document.getElementById（“divId”）。innerHTML =（$（'。input'）。val（））;

但是，如果我没有身份证，我现在该怎么办？不幸的是，HTML源代码的更改不是一种选择。

提前致谢！

Answer 1

只需使用普通选择器，如css和jQuery。 https://api.jquery.com/category/selectors/ 在你的情况下：

$('div.left').html($('.input').val());

Answer 2

如您所见，有很多方法可以做到这一点。您可以按tag name，class，id ...

获取元素

但最强大的方法是使用querySelector

来获取它

function save() {
	var input = document.querySelector('input').value;
	document.querySelector('div.left').innerHTML = input;
}

<input type="text" class="input">
<button onclick="save()">Save</button>
<div class="left"></div>
<div class="right"></div>

Answer 3

很多其他方法可以定位HTML元素，但在这种情况下，您正在寻找的是 getElementsByTagName() 。请注意，这会返回 NodeList 元素集合，因此您还需要指定要定位的索引（从0开始）。例如，如果您要定位第二个<div>元素，则可以使用
document.getElementsByTagName("div")[1]。

这可以在以下示例中看到：

let input = document.getElementsByTagName("input")[0];
let button = document.getElementsByTagName("button")[0];
let div2 = document.getElementsByTagName("div")[1];

button.addEventListener("click", function(){
    div2.innerHTML = input.value;
});

<input type="text">
<button>Output</button>

<br /><br />
<div>Output:</div>
<div></div>

Answer 4

由于每个元素都有唯一的类名，因此可以使用document.getElementsByClassName。这将返回包含该类的元素数组。由于每个类名只有一个元素，因此返回数组的第一个元素将是您的目标。

＆＃13;

<input type="text" class="input">
<button onclick="save()">Save</button>
<div class="left"></div>
<div class="right"></div>
<script>
function save() {
	var input = document.getElementsByClassName('input')[0].value;
	document.getElementsByClassName('left')[0].innerHTML = input;
}
</script>

＆＃13;

Answer 5

这是做你想做的事的众多方法之一： -

在控制台中写下以下内容：

document.getElementsByTagName("div");

现在您可以看到当前文档/页面中使用的div元素总数。您可以通过使用＆＃34;索引号＆＃34;（如数组索引中）为该特定div选择您要选择的一个。

让我们说你的div有类名=＆＃34;对＆＃34;是文档中其他div元素中的第3个元素。这将用于访问该div元素。

document.getElementsByTagName("right")[2].innerHTML = "whatever you want to write";

Javascript：如何将输入打印到类选择的<div>？

5 个答案: