问题的出现是因为有人想要在没有使用jQuery的情况下访问"data-"属性。解决方法是使用getAttribute方法来访问这个属性，就像访问其他属性一样。

原因：

在过去，使用jQuery可以很方便地访问和操作HTML元素上的"data-"属性。然而，随着现代浏览器对HTML5的支持越来越好，不再需要依赖jQuery来实现这个功能。上面的例子中展示了如何使用原生的JavaScript方法来获取和设置"data-"属性的值。这个问题的出现主要是因为在过去，jQuery是处理这个问题的主要工具，而现在，使用原生的JavaScript方法可以更加简洁和高效地实现同样的功能。

解决方法：

要访问和操作HTML元素上的"data-"属性，可以使用原生的JavaScript方法getAttribut和setAttribute。例如，在上面的例子中，使用以下代码可以获取和设置"data-fruit"属性的值：

// 获取属性值
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit');
// 设置属性值
plant.setAttribute('data-fruit', '7');

通过使用这些方法，可以轻松地访问和修改"data-"属性，而无需依赖jQuery。

此外，还可以使用dataset属性来访问和操作"data-"属性。例如，可以使用以下代码获取和设置"data-fruit"属性的值：

// 获取属性值
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.dataset.fruit;
// 设置属性值
plant.dataset.fruit = '7';

使用dataset属性可以使代码更加简洁和可读，而且在现代浏览器中得到广泛支持。然而，需要注意的是，如果需要支持过时的浏览器（如IE），则不适合使用dataset属性。

通过使用原生的JavaScript方法getAttribut和setAttribute，或者使用dataset属性，可以很方便地访问和操作HTML元素上的"data-"属性。这样可以摆脱对jQuery的依赖，并且代码更加简洁和高效。但需要注意的是，如果需要支持过时的浏览器（如IE），则不适合使用dataset属性。

问题的出现原因是，开发者想要在没有使用jQuery的情况下，访问HTML元素的"data-"属性的值。解决方法是使用HTML5中的dataset属性或者使用getAttribute方法。

使用dataset属性的代码如下：

element = document.getElementById("el");
alert(element.dataset.name); // element.dataset.name == data-name

注意：这种方法只适用于HTML5兼容的浏览器。在大多数浏览器中，使用getAttribute方法也能实现同样的效果。

虽然这种方法可能不向后兼容已经被弃用的浏览器（比如IE的所有版本），但这是正确的解决方法。当时（2013年）这种方法是有远见的，而现在已经过去了5年，这种方法应该是首选。

需要注意的是，使用jQuery可能会返回不同的类型。例如，通过dataset属性返回的data值为"0"时，会被视为字符串，而使用jQuery时会被视为数字。