Edit in JSFiddle

<div class="container">
  <input type="text" id="search-text" class="text-box">
  <button id="search-button" class="button">
    百度一下
  </button>
</div>

<div class="container">
  <input type="text" id="search-text-jquery" class="text-box">
  <button id="search-button-jquery" class="button">
    百度一下
  </button>
</div>

<p class="result"></p>

.text-box {
  width: 50%;
}

.button {
  width: 25%;
}

.container {
  /* 上下margin为10像素，左右margin为0 */
  margin: 10px 0;
}

#search-text {
  background-color: rgba(255, 255, 0, 0.25);
}

#search-text-jquery {
  background-color: rgba(0, 255, 255, 0.25);
}

// 你好这是JavaScript的注释

/*
如果你有很多行注释的话
可以这样放起来

以下我们做的是，点击百度一下会把文字放到HTML底部的p.result标签里。
*/

// 以下是纯JavaScript的语法
var textBoxElement = document.getElementById("search-text");
var searchButtonElement = document.getElementById("search-button");

// 下面要定义#search-button点击的时候需要触发的事件
searchButtonElement.addEventListener("click", function(event) {
  // 由于document.getElementsByClassName()函数返回的是一个数组，我们需要挑出第一个
  var resultElement = document.getElementsByClassName("result")[0];
  resultElement.innerHTML = textBoxElement.value;
});


//以下是jQuery的语法
//里面写的东西和CSS指定HTML的
//现在纯JavaScript也已经有了几乎相同的语法了：document.querySelector("#search-button-jquery");，但是这个只返回第一个结果，如果需要返回全部的话要用document.querySelectorAll(".result");
//但是上面这个纯javascript语法对某些旧版IE支持有问题，不过也没多少人有旧IE了哈哈
jQuery("#search-button-jquery").click(function(event) {
  // $ = jQuery
  $(".result").text($("#search-text-jquery").val());
});